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内 容 提 要 


移动 互联 网 时 代 到 来 了 。 本 书 将 当前 Web 设计 中 热门 的 响应 式 设计 技术 与 HTML5 和 CSS3 结合 起 来 ， 
为 读者 全 面 深入 地 讲解 了 针对 各 种 屏幕 大 小 设计 和 开发 现代 网 站 的 各 种 技术 。 不 仅 讨论 了 媒体 查询 、 流 式 
布局 、 相 对 字体 、 响 应 式 媒 体 ， 更 将 HTML5 和 CSS3 的 相关 知识 点 一 并 讲解 ， 是 学 习 最 新 Web 设计 技术 
不 可 多 得 的 佳作 。 

本 书 适合 各 个 层次 的 Web 开发 和 设计 人 员 阅 读 。 
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蒂 姆 : 伯 纳 斯 - 李 在 1991 年 制作 并 发 布 了 第 一 个 网 站 ， 如 今 刚刚 过 去 21 个 年 头 。 在 这 21 
年 里 ,计算 机 和 互联 网 快速 发 展 ， 这 个 世界 的 面貌 也 日 新 月 异 。 在 这 个 过 程 中 ， 网 页 设 
计 从 无 到 有 ， 从 简单 渐 至 专业 ， 从 可 有 可 无 变 为 广 受 关注 。 网 页 设计 方法 也 在 跟随 时 代 
不 断 创新 ， 从 最 初 简单 的 文字 排版 ， 到 表格 布局 ， 再 到 DIV+CSS， 直 到 现在 广 为 流 行 的 
网 格 布局 、 流 式 布 局 等 ， 设 计 师 和 开发 者 们 一 直 致 力 于 为 全 球 网 民 提 供 更 好 的 设计 观感 
和 使 用 体验 。 

iOS 和 Android 的 发 布 ， 掀起 了 移动 互联 网 的 浪潮 ， 智 能 手机 、 平 板 电 脑 、 智 能 家 电 等 新 
设备 层出不穷 ， 我 们 的 世界 变 得 更 加 精彩 纷呈 。 但 这 却 给 网 页 设计 带 来 了 新 的 挑战 ， 在 
面 对 形 形 色 色 的 终端 设备 、 千 差 万 别 的 屏幕 分 辨 率 ， 以 及 良 苦 不 齐 的 网 络 连 接 质量 时 ， 
目前 的 设计 方法 显得 力不从心 。 我 们 无 法 预料 用 户 的 设备 和 网 络 状况 ， 更 不 可 能 为 每 种 
设备 专门 设计 一 套 网 站 ， 那 么 在 移动 互联 网 时 代 ， 如 何 创新 为 用 户 提供 更 好 的 设计 和 体 
验 呢 ? 

2010 年 5 月 25 日， 伊 桑 . 马 科 特 发 表 在 A List Apart 上 的 一 篇 文章 ， 为 我 们 打开 了 思路 。 
在 这 篇 名 为 《Responsive Web Design》 的 文章 中 , PR- 马 科 特 将 三 种 已 有 的 技术 整合 在 
一 起 ， 提 出 了 响应 式 网 页 设计 的 概念 ， 用 以 解决 我 们 当前 遇 到 的 设计 难题 。 响 应 式 网 页 
设计 概念 一 经 提出 就 大 受 欢迎 ( 当然 也 有 争议 ), 很 多 设计 师 和 开发 者 纷纷 实践 并 完善 这 
种 理念 。 两 年 多 的 时 间 里 ,涌现 出 了 越 来 越 多 的 响应 式 网 站 ， 针 对 响应 式 设计 的 工具 和 
资源 也 日 渐 丰 富 。 截 至 目前 ， 响 应 式 设计 是 使 用 一 套 代 码 为 各 类 设备 提供 良好 设计 效果 
和 使 用 体验 的 最 佳 设 计 方 法 。 

你 肯定 对 响应 式 设 计 有 所 耳闻 ， 也 可 能 看 过 一 些 响应 式 设 计 的 技巧 或 相关 文章 ， 但 它们 
都 零 零 散 散 不 成 体系 ， 无 法 让 你 真正 理解 并 掌握 响应 式 设 计 ， 也 无 法 指导 你 立即 开始 响 
应 式 设计 的 实践 。 这 本 书 将 会 带 你 系统 地 学 习 响 应 式 网 页 设计 的 方法 论 ， 书 中 涵盖 了 响 
应 式 设计 的 思想 、 方 法 、 工 具 、 技 巧 、HTML5、CSS3、 相 关 资 源 ， 以 及 针对 老 版 本 浏览 
器 的 兼容 方案 等 内 容 ， 并 以 实际 案例 循序 渐进 地 讲解 了 如 何 创建 一 个 优雅 高 效 易于 维护 
的 响应 式 网 站 。 和 希望 这 些 正 是 你 所 需要 的 。 
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译 者 序 





“得 功 有 法 ， 秉 一 应 万 "”， 这 是 太极 拳 修炼 的 目标 ， 我 想 也 可 以 作为 响应 式 设计 的 目标 。 
修炼 好 响应 式 设计 这 门 功夫 ， 能 够 让 你 安然 自在 ， 以 一 应 万 。 元 芳 ， 湾 心 修炼 吧 ! 
感谢 裕 波 、 杨 海 玲 老师 及 朱 狗 老师 ， 让 我 有 机 会 翻译 本 书 。 非 常 感谢 图 灵 各 位 编辑 的 辛 
勤 工 作 ， 尤 其 感谢 李 松 峰 老师 的 细心 指导 。 另 外 要 感谢 图 灵 社 区 ， 我 在 这 里 受益 菲 浅 。 
最 后 ， 感 谢 我 的 老婆 ， 本 书 的 翻译 离 不 开 她 的 支持 、 监 督 与 参谋 。 

我 在 翻译 本 书 时 尽力 保证 信和 与 达 ， 雅 则 不 敢 奢 望 。 翻 译 中 的 错误 在 所 难免 ， 欢 迎 广大 读 
者 指正 。 如 果 对 本 书 有 任何 意见 、 建 议 或 想法 , 请 发 送 邮件 至 wyqbailey@ gmail.com 或 反 
馈 至 图 灵 社 区 。 


























王 永 强 
2012 年 10 月 成 都 
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如 果 你 想 给 自己 的 网 站 做 一 个 单独 的 “手机 版 ”， 请 三 思 而 后 行 ! 响应 式 网 页 设计 提供 了 
一 种 设计 方法 ， 可 以 使 同一 网 站 在 智能 手机 、 桌 面 电 脑 ， 以 及 介 于 这 两 者 之 间 的 任意 设 
备 上 完美 显示 。 这 种 方法 能 够 根据 用 户 的 屏幕 尺寸 ， 合 理 地 为 现 有 及 将 来 的 各 种 设备 提 
供 最 佳 的 浏览 体验 。 

本 书 提供 了 一 整套 方法 ， 用 来 将 一 个 现 有 的 固定 宽度 的 网 站 设计 变 成 响应 式 的 。 此 外 ， 
本 书 应 用 HTMLS 和 CSS3 提供 的 最 新 最 有 用 的 技术 ， 扩 展 了 响应 式 网 页 设计 的 方法 论 ， 
以 便 网 站 更 简洁 、 更 易于 维护 。 本 书 还 讲解 了 编写 和 发 布 代码 、 图 片 、 文 件 的 最 佳 实践 。 
只 要 你 懂 HTML 和 CSS， 你 就 能 制作 响应 式 网 站 。 


























本 书 内 容 
第 1 章 , HTMLS, CSS3 及 啊 应 式 设计 入 门 , 定义 了 什么 是 响应 式 网 页 设计 ,展示 了 一 些 
响应 式 设 计 的 网 站 示例 ， 重 点 强调 了 使 用 HTMLS 和 CSS3 的 优势 。 
第 2 章 ， 媒体 查 询 : 支持 不 同 的 视 口 ， 讲 解 了 什么 是 媒体 查询 ， 如 何 实现 媒体 查询 ， 以 
及 如 何 针 对 设备 能 力 匹配 CSS 样式 ， 将 其 应 用 于 任意 设计 。 
第 3 章 ， 拥 抱 流 式 布局 ， 讲 解 了 流 式 布局 的 优点 ， 以 及 如 何 将 一 个 现 有 的 固定 宽度 设计 
轻松 地 转换 为 流 式 布局 ， 怎 样 使 用 CSS 框架 快速 搭建 响应 式 网 页 。 
第 4 章 ， 响 应 式 设计 中 的 HTML5， 探讨 了 使 用 HTML5 技术 的 诸多 好 处 ， 比 如 更 简洁 的 
代码 、 语 义 化 标签 、 离 线 存储 ， 以 及 无 障碍 网 页 应 用 辅助 技术 。 
"B53:, CSS3: 选择 器 、 字 体 和 颜色 模式 ， 展 示 了 CSS3 选择 器 的 强大 威力 ， 可 以 让 你 
轻松 地 指定 和 改变 任何 元 素 。 还 讲解 了 通过 @font-face 声明 来 使 用 漂亮 的 网 络 字体 ,另外 
讲解 了 新 的 CSS3 颜色 模式 如 RGB(A) 和 HSL(A)« 
第 6 章 , 用 CSS3 创造 令 人 惊艳 的 美 ， 展 示 了 如 何 使 用 纯粹 的 CSS3 代码 实现 文字 阴影 、 
盒 阴 影 和 渐变 效果 。 还 涵盖 了 如 何 使 用 多 重 背景 图 片 ， 以 及 如 何 通过 字体 文件 创建 图 标 。 
第 7 章 ，CSS3 的 过 渡 、 变 形 和 动画 ,讲解 如 何 仅 使 用 CSS3 来 创建 和 转换 屏幕 上 的 元 素 ， 
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并 制作 动画 效果 。 

第 8 章 , H HTML5 和 CSS3 征服 表单 ， 曾 述 了 在 所 有 设备 上 (从 最 新 的 智能 手机 到 桌面 
版 浏览 器 ) 都 能 良好 运行 的 跨 浏览 器 表单 开发 技巧 。 

第 9 章 ， 解 决 跨 浏 览 器 问题 ， 讲 解 了 如 何 保证 老 版 本 的 Internet Explorer 可 响应 ， 如 何 将 
一 组 链接 修改 成 移动 设备 上 的 一 个 菜单 ， 如 何 为 高 分 辩 率 显示 器 提供 不 同 内 容 ， 以 及 如 
何 使 用 Modernizr 框架 分 条 件 地 加 载 资源 文件 。 











准备 工作 
你 必须 对 HTML 和 CSS 很 熟悉 。 有 一 点 JavaScript 基础 会 很 有 帮助 。 良 好 的 电影 品味 也 
很 有 益处 。 














本 书 读者 
你 是 否 正 在 开发 两 套 网 站 ， 一 套 给 移动 设备 ， 一 套 给 大 显示 器 ? 又 或 者 你 已 听 说 过 “ 响 
应 式 网 页 设计 ”但 却 不 确定 如 何 将 HIML5 CSS3 和 响应 式 设计 融合 在 一 起 ?” 如 果 是 ， 
那么 本 书 可 以 让 你 在 所 有 竞争 对 手 之 前 ， 将 你 的 网 站 提升 到 一 个 更 高 层次 。 
本 书面 向 那些 正在 使 用 HTML 4.01 和 CSS 2.1 开发 固定 宽度 网 站 的 网 页 设计 师 和 开发 人 
tà, 讲解 了 如 何 使 用 HTML5 和 CSS3 制作 可 适应 任意 屏幕 尺寸 设备 的 响应 式 网 站 。 








本 书 约定 
本 书 中 使 用 几 种 不 同 的 文字 样式 来 区 分 不 同类 型 的 信息 ， 具 体 约定 如 下 。 
正文 中 的 代码 使 用 如 下 格式 : 
"HTMLS 接受 宽松 语法 ,例如 «scRipt SrC-3js/jquery-1.6.2.js»«/script» iX 
样 的 语句 也 是 有 效 的 。” 
代码 段 使 用 如 下 格式 : 


<div class="header"> 
<div class="navigation"> 
<ul class="nav-list"> 
<li><a href="#" title="Home">Home</a></1i> 
<li><a href="#" title="About">About</a></1i> 
</ul> 
«/div» «!—end of navigation --» 
«/div» «!—end of header --» 


当 要 专门 强调 代码 块 中 的 某 一 部 分 时 ， 则 对 相关 行 或 条 目 使 用 粗 体 格式 : [编者 注 : 网 页 


图 灵 社 区 会 员 lemoggy(lemoggy 9 foxmail.com) zz 尊重 版 权 


z 
mih 
o2 





格式 无 法 实现 此 效果 。] 


#wrapper ( 
margin-right: auto; 
margin-left: auto; 
width: 96$; /* 最 外 围 的 DIV */ 
) 


fheader ( 

margin-right: 10px; 

margin-left: 10px; 

width: 97.9166667%; /* 940 + 960 */ 
} 


新 术语 ， 以 及 重要 词汇 也 使 用 粗 体 。 文 中 提 到 的 那些 菜单 、 对 话 框 中 的 文字 ， 会 使 用 粗 
体 或 大 写 来 标注 ， 如 :“ 导 航 按钮 不 再 做 背景 色 切 换 ， 内 容 区 的 THESE SHOULD HAVE 
WON 按钮 和 侧 边 栏 的 详细 信息 按钮 消失 了 ， 而 字体 也 与 设计 文档 相差 甚 远 。” 


[ Q 这 个 图 标 表示 提示 或 技巧 。 | 


读者 反馈 
我 们 时 刻 欢迎 你 的 反馈 ， 以 便 了 解 你 对 本 书 的 看 法 。 你 的 宝贵 意见 有 助 于 我 们 提升 书籍 
的 质量 。 
一 般 的 阅读 反馈 ， 可 直接 发 送 电子 邮件 至 feedback@packtpub.com， 请 在 邮件 标题 中 注 明 
书 名 。 
如 果 你 在 某 个 领域 内 有 专长 且 有 兴趣 编写 相关 书籍 ， 请 访问 www.packtpub.com/authors 
查看 作者 指南 。 




















客户 支持 
现在 你 已 是 Pack 图 书 的 尊贵 读者 了 ,我 们 有 一 系列 的 售后 支持 ,保证 你 的 消费 物 有 所 值 。 
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尽管 我 们 已 经 对 书籍 作 了 仔细 校对 以 保证 内 容 准确 ， 但 错误 在 所 难免 。 如 果 在 书 中 发 现 
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任何 的 文字 或 代码 错误 ， 非 常 欢迎 你 将 这 些 错 误 提交 给 我 们 ， 这样 可 以 帮助 我 们 在 后 续 
版 本 中 改正 错误 ,避免 其 他 读者 产生 不 必要 的 误解 。 一 旦 发 现 错误 ,请 登录 
http://www.packtpub.com/support， 选 择 书 名 ， 点 击 errata submission form ( 提交 勘误 ) fi 
接 ， 然 后 填写 具体 的 错误 信息 即 可 。 只 要 你 提交 的 勘误 通过 验证 ， 勘 误 信 息 就 会 上 传 到 
我 们 的 网 站 ， 或 者 追加 到 已 有 勘误 列表 中 ， 显 示 在 该 书 的 勘误 页 面 。 
































盗版 
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过 copyright@packtpub.com 联系 我 们 。 对 您 帮助 我 们 保护 
高 品质 图 书 的 行为 表示 敬意 。 
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HTML5., CSS3 及 响应 式 
设计 入 门 








直到 最 近 ， 网 站 设计 普遍 还 在 使 用 固定 宽度 ( 如 960 像素 )， 以 期 给 所 有 终端 用 户 带 来 较 





为 一 致 的 浏览 体验 。 这 种 固定 宽度 设计 在 笔记 本 电脑 上 显示 刚刚 好 ， 而 在 高 分 辨 率 显 示 


右上 却 会 在 两 边 多 出 些 空白 。 


但 现在 有 了 智能 手机 。 苹 果 公 司 的 iPhone 第 一 次 带 给 我 们 真正 意义 上 易 用 的 手机 上 网 体 








验 ， 之 后 其 他 公司 纷纷 效仿 。 现 在 人 们 可 以 舒服 地 使 用 手机 上 网 冲浪 ,不 用 再 像 过 去 那 
样 需要 有 “ 挑 圆 片 ” “世界 冠军 一 样 的 灵活 拇指 ， 才 能 在 小 屏幕 上 看 看 网 页 。 此 外 ， 消 费 
者 在 家 中 上 网 时 优先 使 用 小 屏幕 设备 〈 如 平板 电脑 、 上 网 本 ) 正成 为 趋势 。 一 个 不 争 的 
事实 是 ， 使 用 小 屏幕 设备 上 网 的 人 数 正 在 以 前 所 未 有 的 速度 增长 。 与 此 同时 ，27 英寸 和 














30 英寸 的 大 显示 器 也 在 快速 普及 。 上 网 设备 之 间 的 尺寸 差距 与 日 俱 增 。 




















笠 运 的 是 ， 面 对 不 断 发 展 的 浏览 器 和 上 网 设备 ， 我 们 有 可 行 的 解决 方案 。 

















采用 HTML5 


和 CSS3 技术 的 响应 式 网 页 设计 , 可 以 使 网 站 兼容 多 种 设备 和 屏幕 。 而 这 种 方法 的 最 佳之 











处 ， 在 于 不 需要 什么 服务 器 端 方案 ， 也 完全 可 以 实现 。 
本 章 内 容 

口 支持 小 屏幕 设备 的 重要 性 

口 什么 是 移动 网 站 设计 

口 什么 是 响应 式 网 页 设计 

口 优秀 响应 式 网 页 实例 赏析 

口 视 口 和 屏幕 的 区 别 

口 安装 和 使 用 修改 视 口 的 浏览 器 扩展 程序 

O 使 用 HTML5 编写 更 简洁 的 标记 

口 使 用 CSS3 解决 常见 的 设计 问题 














CD 一 种 游戏 ， 详 见 http://en.wikipedia.org/wiki/Tiddlywinks。 
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2 * 13€ HTML5, CSS3 及 响应 式 设计 入 门 
1.1 为 什么 智能 手机 很 重要 (而 老 版 的 IE 不 再 重要 ) 


虽然 统计 数据 一 般 仅 用 作 粗 略 参考 ， 但 来 自 gs.statcounter.com 的 统计 数据 却 值得 注意 。 
从 2010 年 7 月 到 2011 年 7 月 的 12 个 月 中 ,全 球 手 机 浏览 器 的 使 用 量 从 2.86% 上 升 至 
7.02%。Internet Explorer 6 的 使 用 率 则 是 从 8.79% 下 降 到 3.42%。 到 2011 4E 7 H , Internet 
Explorer 7 的 使 用 率 也 降 到 了 5.45% 。 如 果 客 户 老 是 要 求 :“ 我 们 的 网 站 必须 兼容 IE6 和 
IE7!” 你 可 以 反 驶 说 :“ 我 们 应 该 把 精力 花 在 更 有 价值 的 地 方 。” 用 手机 上 网 的 人 比 用 台 
式 机 和 笔记 本 中 的 IE6 或 IE7 上 网 的 人 多 多 了 。 你 可 以 听 到 全 球 前 端 开 发 工程 师 震 耳 欲 礁 
的 欢呼 声 ! 

越 来 越 多 的 人 使 用 小 屏幕 设备 上 网 ， 这 些 设备 上 的 浏览 器 在 设计 时 都 考虑 到 了 如 何 显示 
好 现 有 网 站 。 手 机 浏览 器 会 将 一 个 标准 网 页 缩小 至 与 设备 可 视 区 域 (标准 技术 术语 叫做 
“ 视 口 ”) 恰好 匹配 。 然 后 用 户 在 自己 感 兴趣 的 内 容 区 域 上 放大 浏览 。 这 样 看 起 来 已 经 挺 
好 了 ， 那 作为 前 端 设计 师 和 工程 师 的 我 们 ， 为 什么 还 要 在 这 上 面 继续 优化 呢 ? 












































4:35 PM = 
TV Guide, ITV1, ITV2, catchup, Ess..- 





m/ 











在 iPhone 或 Android 手机 上 浏览 的 网 页 越 多 (如 上 图 所 示 的 那样 )， 就 越 能 深刻 体会 到 为 
什么 我 们 还 需要 继续 优化 。 为 了 看 清楚 页 面 内 容 ， 需 要 不 停 地 放大 、 缩 小 页 面 ， 然 后 为 
了 看 到 视 口 外 的 文字 ， 再 左 、 右 拖 动 ， 结 果 一 不 小 心 点 了 一 个 链接 ， 你 说 讨 大 不 讨厌? 
我 们 当然 可 以 做 得 更 好 ! 
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1.5 ”响应 式 网 页 设计 的 定义 3 





1.2 


1.3 


响应 式 设 计 一 定 是 最 佳 选 择 吗 


如 果 预 算 充 足 且 形势 需要 ， 做 一 个 真正 的 “手机 版 ”网 站 是 首选 。 这 样 就 可 以 基于 用 户 
的 设备 、 位 置 、 连 接 速 度 ， 以 及 包括 技术 特性 在 内 的 其 他 变量 来 提供 不 同 的 内 容 、 设 计 
和 交互 。 举 一 个 实际 的 例子 ,假设 有 一 家 比 院 连锁 店 ， 它 有 一 个 标准 版 的 网 站 和 一 个 手 
机 版 网 站 ,手机 版 网 站 可 以 基于 增强 现实 功能 、 用 户 当前 GPS 位 置 找到 附近 的 比萨 店 。 
单独 一 个 响应 式 设计 远 远 不 能 支撑 这 种 解决 方案 。 

然而 ,不 是 所 有 项 目 都 要 求 如 此 完美 。 大 多 数 情 况 下 ， 根 据 视 口 大 小 为 用 户 提供 与 之 匹 
配 的 视觉 效果 还 是 优先 选择 。 例 如 ， 针 对 大 多 数 网 站 ， 虽 然 从 服务 器 端 请 求 的 内 容 相同 ， 
但 我 们 可 以 根据 不 同 设备 改变 网 页 的 显示 方式 。 在 小 屏幕 设备 上 ， 可 能 是 将 次 要 内 容 放 
在 主体 内 容 之 下 ,或 者 最 坏 情况 下 将 其 直接 隐藏 ， 也 可 能 是 将 导航 按钮 改造 成 便于 手指 
操作 ， 而 不 是 只 提供 一 些 需要 精确 瞄准 才能 点 击 的 玩意 儿 ! 字体 大 小 也 应 该 恰到好处 ， 
便于 阅读 ,不 再 需要 不 停 地 在 屏幕 上 拖 来 拖 去 。 同 样 ， 在 迎合 小 屏幕 的 同时 ， 我 们 也 不 
想 降 低 笔 记 本 和 台式 机 用 户 的 浏览 体验 。 既 然 我 们 意 在 兼容 万 物 ， 那 给 那些 配备 1900 像 
素 甚至 更 大 屏幕 的 用 户 提供 一 点 额外 改进 又 有 何不 可 呢 ? 简 而 言 之 ， 我 们 需要 那些 能 响 
应 各 种 设备 大 小 的 完美 设计 。 
























































响应 式 网 页 设计 的 定义 


响应 式 网 页 设计 (RWD, Responsive Web Design ) 这 个 术语 ， 由 伊 桑 ' SPHE (Ethan 
Marcotte ) 提出 。 他 在 A List Apart 发 表 了 一 篇 开创 性 的 文章 , 将 三 种 已 有 的 开发 技巧 ( 弹 
性 网 格 布局 、 弹 性 图 片 、 媒 体 和 媒体 查询 ) 整合 起 来 ， 并 命名 为 响应 式 网 页 设计 。 这 个 
术语 还 有 一 堆 表 示 相 同意 思 的 其 他 叫 法 ， 如 流 式 设计 、 弹 性 布局 、 塑 料 布 局 、 流 体 设计 、 
自 适 应 布局 、 跨 设备 设计 以 及 弹性 设计 。 

上 面 仅 列举 了 其 中 一 部 分 ! 不 过 ， 正 如 马 科 特等 人 所 说 ， 真 正 的 响应 式 设计 方法 不 仅仅 
只 是 根据 视 口 大 小 改变 网 页 布局 。 相反, 它 是 要 从 整体 上 颠覆 我 们 当前 设计 网 页 的 方法 。 
以 往 我 们 先是 针对 桌面 电脑 进行 固定 宽度 设计 ， 然 后 将 其 缩小 并 针对 小 屏幕 进行 内 容重 
HE; 现在 我 们 应 该 首先 针对 小 屏幕 进行 设计 ， 然 后 逐步 增强 针对 大 屏幕 的 设计 和 内 容 。 


一 句 话 概括 响应 式 网 页 设计 
如 果 要 用 一 句 话 概括 响应 式 网 页 设计 ， 我 觉得 它 是 针对 任意 设备 对 网 页 
Q 内 容 进行 完美 布局 的 一 种 显示 机 制 。 相 反 ， 如 果 需 要 根据 不 同 设 备 提供 
特定 的 内 容 和 功能 ， 那 就 需要 一 个 真正 的 “手机 版 ”网 站 。 这 种 情况 下 ， 
手机 版 网 站 会 提供 与 桌面 版 网 站 完全 不 同 的 用 户 体验 。 
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4 * 1# HTMLS5, CSS3 及 响应 式 设 计 入 门 
14 为 什么 要 在 响应 式 设计 上 停滞 不 前 
响应 式 网 页 设计 能 够 根据 视 口 变化 控制 页 面 文档 流 , 但 我 们 可 以 走 得 更 远 。HTML5 提供 
了 比 HMTL4 更 多 且 更 加 语义 化 的 标签 。CSS3 的 媒体 查询 是 响应 式 设计 不 可 或 缺 的 组 成 
部 分 ，CSS3 的 其 他 功能 给 了 我 们 前 所 未 有 的 灵活 性 。 我 们 将 挣脱 背景 图 像 和 复杂 的 
JavaScript 代码 的 英 绊 ， 拥 抱 简洁 的 CSS3 渐变 、 投 影 、 字 体 、 动 画 和 变换 。 
在 使 用 HTMLS 和 CSS3 制作 响应 式 网 页 之 前 ， 让 我 们 先 来 欣赏 一 些 值 得 学 习 的 实例 ,看 
看 哪些 高 手 正 在 使 用 新 潮 的 响应 式 HTMLS 和 CSS3 绝技 创造 奇迹 , 而 我 们 可 以 从 他 们 的 
开创 性 杰作 中 学 到 些 什 么 。 
1.5 ”响应 式 网 页 设计 示例 
若 要 全 方位 测试 你 自己 或 别人 的 响应 式 网 站 , 则 需要 针对 每 一 种 设备 和 不 同 的 屏幕 尺寸 ， 
分 别 准备 不 同 的 测试 系统 。 尽 管 这 是 最 完美 的 办 法 ,但 通过 改变 浏览 器 窗口 大 小 其 实 就 
可 以 完成 大 多 数 测 试 。 除 此 之 外 ， 还 有 很 多 第 三 方 插件 和 浏览 器 扩展 可 供 选 择 ， 通 过 它 
们 可 以 将 当前 浏览 器 窗口 或 视 口 设 定 为 指定 像素 。 必 要 时 ， 还 可 以 自动 将 当前 浏览 器 窗 
口 或 视 口 切换 成 为 默认 大 小 ( 如 1024x768 像素 )。 这 样 你 就 可 以 轻松 地 测试 不 同 屏幕 视 
口 尺寸 下 的 网 站 效果 。 
迷恋 像素 ? 忘 了 它 吧 ! 
M 进入 了 响应 式 网 页 设计 的 教堂 , 就 不 要 再 迷恋 像素 (px ) 这 个 度量 单位 ， 
Q 因为 大 多 数 情况 下 我 们 不 会 用 像素 ,而 会 使 用 相对 度量 单位 (em 或 百 分 
比 )。 相 对 单位 更 方便 我 们 审查 其 他 响应 式 设 计 作 品 ， 查 看 设计 的 变更 
之 处 5 
1.5.1 下 载 视 口 调试 工具 


Internet Explorer 用 户 请 下 载 安 装 Microsoft Internet Explorer Developer Toolbar ， 下 载 地 址 
如 下 : http//www.microsoft.com/download/en/details.aspx?id-18359 





如 果 你 在 使 用 Safai, ， 虽 然 ResizeMe ( http://web.me.com/aaronholla/Safari_Extensions/ 
ResizeMe.html ) 的 功能 类 似 日 免费 ， 但 我 最 爱 Resize ( http://resizeSafari.com )。 








Firefox 用 户 请 下 载 Firesizer ( https://addons.mozilla.org/en-US/firefox/addon/firesizer/ ), 
Chrome 请 下 载 Windows Resizer ( https://chrome.google.com/webstore/detail/kkelicaakdan- 


hinjdeammmilcgefonfh )。 


不 喜欢 使 用 浏览 器 扩展 ”还 有 一 个 方法 : 我 写 了 个 简单 HTML 页 面 来 显示 浏览 器 窗口 的 
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1.5 ”响应 式 网 页 设计 示例 5 








当前 视 口 高 度 和 宽度 。 页 面 用 了 jQuery 框架 , 获取 当前 的 视 口 的 高 度 和 宽度 并 显示 出 来 。 
你 可 以 在 浏览 器 新 标签 页 中 打开 这 个 页 面 , 调整 窗口 大 小 , 然后 切 回 你 要 测试 的 页 面 查 看 
效果 。 这 个 超级 简单 的 “What size is my viewport page?” 页 面 地 址 如 下 : http://benfrain.com/ 


easily-display-the-viewport-size-of-your-page-for-responsive-designs/ 











视 口 和 屏幕 尺寸 


视 口 和 屏幕 尺寸 不 是 同一 个 概念 。 视 口 是 指 浏览 器 窗口 内 的 内 容 区 域 ， 
vox 不 包含 工具 栏 、 标 签 栏 等 。 也 就 是 网 页 实际 显示 的 区 域 。 屏 幕 尺寸 指 的 
$s 是 设备 的 物理 显示 区 域 。 需 要 注意 的 是 有 些 浏览 器 调整 工具 显示 的 尺寸 
包含 浏览 器 的 其 他 元 素 ， 诸 如 地 址 栏 、 标 签 栏 和 搜索 栏 ， 而 有 些 工 具 则 
不 是 这 样 。 在 下 面 的 蕉 图 中 ， 实 际 的 视 口 尺寸 显示 在 右上 角 (1156x921 
像素 )， 同 时 Firesizer 插件 将 窗口 尺寸 显示 在 右 下 角 (1171x1023 像素 )。 
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现在 ,我 们 带 着 所 有 需要 的 工具 ， 开 始 鉴 赏 最 好 的 响应 式 网 站 。 启 动 你 钟爱 的 浏览 
打开 浏览 需 调 整 工具 ， 访 问 http://thinkvitamin.com/ 。 


如 果 你 的 视 口 宽度 大 于 1060 像素 ， 你 会 看 到 如 下 图 所 示 的 布局 : 
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如 果 你 的 视 口 宽度 介 于 930 像素 到 1060 像素 之 间 ， 你 会 看 到 如 下 图 所 示 布 局 : 
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1.5 ”响应 式 网 页 设计 示例 7 





注意 看 logo 旁边 的 主导 航 菜单 是 如 何 变化 的 。 主 内 容 区 右 侧 的 图 标 一 个 挨 着 一 个 排列 ， 
界面 上 的 一 切 都 合理 可 用 ， 最 重要 的 是 ， 没 有 一 样 从 屏幕 上 游 出 。 现 在 让 我 们 再 看 看 视 
口 宽度 小 于 880 像素 的 效果 ， 截 图 如 下 : 
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definitely gave us a ton more confidence to check them out. 
Being able to store 100,000 documents with them for free also 




















头 部 的 效果 基本 没 变 ， 但 注意 右 侧 的 侧 边栏 还 是 变 窗 了 一 些 。 图 标 排 成 了 2 29, 同 
时 文本 块 做 了 适当 调整 ， 其 中 的 文本 流 相应 地 发 生变 化 。 


不 过 ， 将 视 口 宽度 减 小 到 小 于 600 像素 ,你 就 会 发 现 一 个 重大 的 变化 ， 如 下 图 所 示 : 
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Being able to store 100,000 documents with them for free also 
helped out a ton. We've been indexing some of our administrative 
search with IndexTank for about 6 months now and just recently 
started using IndexTank for our 
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怎么 样 ? 整个 侧 边 栏 对 我 们 的 新 视 口 做 出 了 响应 ， 网 站 最 重要 的 内 容 区 占据 了 整个 浏览 
器 窗口 宽度 。 注 意 看 头 部 的 导航 链接 现在 是 水 平 排列 的 ， 而 不 是 被 放 在 logo 的 旁边 。 另 
Jh, logo 本 身 的 大 小 也 做 了 调整 。 以 上 所 有 的 这 些 变 化 有 助 于 根据 视 口 尺 寸 为 用 户 创建 
更 好 的 体验 。 

让 我 们 来 看 看 另 一 个 例子 : http://2011.dconstruct.org/。 视 口 较 宽 时 (大 于 1350 像素 ) 网 
站 效果 如 下 图 所 示 : 
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请 特别 注意 那 9 张 图 的 排列 格式 。 当 你 减 小 视 口 宽度 时 〈 小 于 960 像素 )， 注 意 看 界面 
发 生 了 什么 变化 。 三 行 三 列 的 图 片 排列 方式 变 成 了 三 行 两 列 外 加 下 方 一 行 三 列 , 如 下 图 
所 示 : 








CONFERENCE WORKSHOPS LOCATION 
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继续 减 小 视 口 宽度 ， 在 小 于 720 像素 的 时 候 我 们 会 遇 到 另 一 个 设计 “ 断 点 "。 头 部 导航 链 
接 转 换 成 了 带 图 片 的 导航 区 域 ， 这 为 触 屏 导航 提供 了 更 好 的 操作 区 域 : 











dConstruct 2011 


4» 


Ñi http: //2011.dconstruct.org/ $t v CI (3% Google Qf 





1 2 dConstruct 2011 
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DIGITAL PRODUCTS 


brings together Leading thinkers from the fields of interaction 
design, mobile design and ubiquitous computing to explore how we can bridge 
the gap between physical and digital product design. 

















继续 减 小 视 口 宽度 ， 当 小 于 480 像素 时 ， 图 片 排列 方式 又 变 成 了 第 一 行 2 张 图 片 ， 第 二 
行 3 张 ， 第 三 行 4 张 。 这 些 图 片 的 大 小 在 视 口 宽度 缩小 至 大 约 300 像素 时 又 发 生 了 变化 。 
下 面 的 截图 显示 了 其 在 iPhone 上 的 效果 : 
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1.5.2. 在线 创意 源泉 


推荐 一 个 响应 式 设计 创意 收集 网 站 : http://mediaqueri.es。 虽 然 这 里 收集 的 网 站 并 不 是 全 
部 都 采纳 完整 的 响应 式 方法 论 ， 即 先 针 对 小 视 口 进行 设计 ， 然 后 逐步 针对 大 视 口 进行 渐 
进 增强 支持 。 但 就 目前 来 看 ， 响 应 式 设 计 方 法 兴起 的 时 间 不 长 ， 再 考虑 到 响应 式 网 页 设 
计 的 各 种 可 能 性 ， 这 里 确实 有 很 多 能 让 我 们 汲取 创意 的 范例 。 尽 管 调整 视 口 大 小 来 浏览 
网 站 能 说 明 响 应 式 网 页 设计 的 理念 ， 但 这 没有 展示 出 HTML5 的 优势 。HTML5 的 优势 事 
实 上 在 幕后 发 挥 。 所 以 让 我 们 将 注意 力 转 移 到 幕后 ， 来 了 解 一 下 HTMLS 的 优秀 之 处 。 
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1.6 为 什么 HTML5 很 优秀 
在 创建 可 以 通过 W3C 标准 验证 的 页 面 时 ，HTML5 强调 简化 标签 ， 仅 链接 那些 我 们 必须 
的 CSS, JavaScript 和 图 片 文件 。 智 能 手机 用 户 只 能 使 用 有 限 的 带宽 访问 我 们 的 页 面 ， 而 
响应 式 设计 的 一 个 主要 目标 就 是 ， 网 站 不 仅 要 对 用 户 有 限 的 视 口 做 出 响应 ， 还 要 以 最 快 
的 时 间 加 载 网 页 。 虽 然 移 除 宛 余 的 标签 元 素 只 能 节省 一 点 字 节 ， 但 积 少 成 多 ! 
较 之 上 一 个 版 本 的 HTML (HTML 4.0.1 ), HTML5 进行 了 极 大 的 改进 ， 提 供 了 许多 新 特 
性 。 前 端 开发 工程 师 可 能 主要 对 HTMLS 的 新 语义 元 素 感 兴趣 , 这 些 新 元 素 给 搜索 引擎 提 
供 了 含义 更 加 丰富 的 代码 。 HTML5 也 可 以 在 表单 提交 等 基本 网 页 交互 场景 中 对 用 户 做 出 
反馈 , 一 般 不 再 需要 复杂 的 JavaScript 表单 处 理 流程 。 同 样 ， 这 为 我 们 的 响应 式 设计 来 带 
来 的 好 处 就 是 ， 人 允许 我 们 创建 更 加 简洁 和 快速 的 代码 。 

16.1 省 时 省 力 


HTML 文档 的 第 一 行 都 是 使 用 Doctype ( 文档 类 型 声明 ) 开头 。 老 实说 ， 这 段 代码 一 般 都 

是 由 代码 编辑 器 自动 生成 或 者 是 从 模板 文件 中 粘贴 过 来 的 〈 没 人 会 真 的 手工 敲 出 完整 的 

HTML 4.01 文档 类 型 声明 吧 ? )。 标 准 的 HTML 4.01 网 页 的 文档 类 型 声明 如 下 所 示 : 

<! DOCTYPE HTML PUBLIC "-// W3C/ / DTD HTML 4.01 Transitional// EN" "http://www. w3.org/ 
TR/ html 4/100se. dtd'» 

如 今 在 HTMLS 中 ， 则 化 繁 为 简 : 

<! DOCTYPE ht ml > 

如 前 所 述 ， 我 写 页 面 的 时 候 从 来 不 会 手工 敲 出 文档 类 型 声明 ， 我 猜 你 也 不 会 。 那 你 

嗪 嘻 半 天 有 什么 实际 意义 ? 不 要 着 急 ， 还 得 往 页 面 中 链接 JavaScript 或 CSS 文件 呢 。 在 

HTML 4.01 中 ， 链 接 一 个 脚本 文件 的 正确 方法 如 下 : 

«script src="js/j query-1.6.2.js" type="text/javascript"></script> 

HTMLS 中 变 得 更 简单 : 

«script srce'jsljquery-1.6.2.js'»«[scri pt» 


如 你 所 见 ，t ype 属性 不 再 是 必需 的 。 链 接 CSS 文件 与 此 类 似 。HTML5 也 接受 非常 松散 
的 语法 。 如 ，<SsCRipt SrC=js/j query-1,6,2.js></script> 和 之 前 所 举例 子 一 样 有 
效 ， 尽 管 我 们 省 略 了 脚本 源 文件 地 址 两 边 的 引号 ， 而 且 标 签 和 属性 名 大 小 写字 母 混用 ， 
但 HTMLS 并 不 介意 ， 这 样 的 代码 照样 能 够 通过 W3C 的 HTMLS 验证 工具 
( http://validator.w3.org/ ) 的 验证 。 如 果 你 在 写 代 码 时 容易 丢 三 落 四 ， 这 或 许 是 个 好 消息 。 
如 果 你 想 从 代码 中 吻 除 每 一 个 可 能 多 余 的 字符 ， 这 点 尤其 有 用 。 在 代码 编写 方面 还 有 很 
多 细节 可 以 让 我 们 的 工作 更 加 轻松 从 容 , 但 我 猪 你 一 定期 待 HTMLS 更 多 的 精彩 内 容 。 那 
就 让 我 们 来 快速 浏览 一 下 HTMLS 新 增 的 语义 元 素 。 
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1.6.2 ”新 增 了 语义 化 标签 元 素 


1.7 





制作 标准 的 HTML 页 面 时 ， 头 部 和 导航 一 般 都 是 标 配 ， 如 下 所 示 : 


«div classz'header'» 
«div classz'navigation"» 
«ul classz'nav-list'» 
<li><a hrefz'£' titlez'Home'»Home«/a»«/li» 
<li><a hrefz'£' titlez'About'»About«/a»«/li» 
«lul» 
</div> «!-end of navigation --» 
«| div» «l-end of header --» 


看 看 我 们 用 HTMLS 如 何 实现 : 


«header» 
«nav» 
«ul idz'nav-.list'» 
<li><a hrefz'£' titlez'Home'»Home«/a»«/li» 
<li><a hrefz'£' titlez'About'»About«/a»«/li» 
«ul» 
<| nav» 
«| header» 


怎么 样 ? 对 于 表示 每 个 结构 化 元 素 的 毫 无 个 性 的 <div > 标签 ( 虽然 为 应 用 样式 加 了 class 
名 )，HTML5 为 我 们 提供 了 一 些 有 语义 的 元 素 。 页 面 中 的 一 些 通用 结构 体 如 头 部 和 导航 
(后 面 还 会 看 到 更 多 ) 有 了 独立 的 标签 。 使 用 <nav > 标签 会 使 我 们 的 代码 变 得 更 有 语义 ， 
如 同 告诉 浏览 器 ,，“ 嘿 ,这 块 内 容 就 是 导航 ”"。 这 对 我 们 来 说 是 件 好 事 ， 但 更 重要 的 是 对 
搜索 引擎 来 也 是 件 好 事 。 搜 索引 擎 能 比 以 前 更 好 地 理解 我 们 的 网 页 ， 并 相应 地 评定 网 页 
内 容 。 

在 编写 HTML 页 面 时 ， 我 经 常 提醒 自己 ， 这 些 页 面 在 最 终 发 布 到 互联 网 上 之 前 ， 将 按 流 
但 交 给 负责 后 台 开 发 的 同事 ( 你 懂 的 ， 就 是 那些 使 用 PHP、Ruby、.NET、ColdFusion 等 
等 语言 的 帅哥 们 )。 为 了 和 后 台 开发 人 员 保 持 良好 的 协作 关系 ， 我 通常 都 会 给 代码 中 的 
«| div > 结束 标签 添加 注释 ， 以 确保 其 他 人 (也 包括 我 自己 ) 能 够 轻松 地 确定 <di v> 元 素 
在 哪里 结束 。HTMLS 可 以 让 我 们 省 去 大 部 分 这 样 的 工作 。 查 看 HTMLS 代码 时 ， 假 如 看 
到 一 个 </ header > 结束 标签 ， 你 会 立即 明白 哪个 标签 结束 了 ， 不 用 注释 。 

VA E31] HS Us f HTMLS 语义 增强 的 一 斑 。 先 别 激动 , 我们 还 要 认识 一 位 朋友 。 如 果 没 
有 它 ， 就 没有 网 页 设计 的 新 时 代 ， 它 就 是 CSS3。 






































CSS3 为 响应 式 设 计 和 更 多 创新 奠定 了 基础 


如 果 你 从 20 世纪 90 年 代 中 期 就 开始 从 事 网 页 设计 ， 应 该 记得 当时 所 有 的 设计 都 基于 表 
格 布局 。 而 且 , 样式 与 内 容 是 交织 在 一 起 的 。CSS ( 层 秋 样式 表 ) 作为 一 种 将 设计 与 内 容 
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1.7.1 


1.7.2 


分 离 的 方法 被 引入 。 网 页 设计 师 们 花 了 一 些 时 间 才 走 进 基 于 CSS 设计 的 美丽 新 世界 ， 庄 
lij "CSS 禅 意 花 园 ”( http://www.csszengarden.com ) 这 样 的 网 站 从 视觉 上 形象 地 展示 了 基 
于 css 设计 的 网 站 所 能 达到 的 效果 ， 为 我 们 铺 平 了 前 进 的 道路 。 从 那 以 后 ，CSS 成 为 了 
定义 网 页 表现 层 的 标准 方法 ，CSS 2.1 是 当前 正式 批准 的 CSS 标准 。CSS3 尚未 被 正式 批 
准 ， 但 这 并 不 意味 着 它 的 大 部 分 内 容 现在 无 法 使 用 。W3C 工作 组 的 说 明 如 下 : 





























CSS3 是 在 CSS 2 基础 上 按 模块 构建 的 ， 以 CSS 2.1 标准 为 核心 。 每 个 模块 都 会 
增加 功能 或 是 替换 CSS 2.1 标准 中 已 有 章节 。CSS 工作 组 的 设想 是 新 的 CSS 模 
块 不 会 与 CSS 2.1 标准 冲突 ， 这 些 模块 只 会 追加 新 功能 ， 改 进 已 有 规定 。 
大 部 分 W3C 标准 草案 读 起 来 (不 可 避免 地 ) 像 法 律 条 文 。 简 单 来 说 ，CSS3 是 一 种 附加 
模块 式 构造 ， 而 不 是 大 一 统 的 标准 。 由 于 CSS3 以 CSS 2.1 为 核心 ， 所 以 CSS 2.1 的 功能 
照样 可 以 使 用 。 不 仅 如 此 , 某 些 相对 成 熟 的 CSS3 模块 ( 并 不 是 所 有 模块 都 得 到 了 相同 程 
度 的 支持 ) 今天 也 可 以 较为 广泛 地 使 用 了 ， 因 此 不 必 等 待 整个 规范 得 到 批准 。 



































底线 : CSS3 不 破坏 任何 东西 


关于 CSS3 ， 最 鼓舞 人 心 的 一 点 应 该 是 在 老 版 本 浏览 器 中 使 用 它们 无 法 解析 的 属性 ,不 会 
造成 任何 问题 。 它 们 (包括 Internet Explorer 6, 7, 8) 会 欣然 忽略 那些 无 法 解析 的 属性 。 
这 使 我 们 能 够 为 那些 先进 的 浏览 器 进行 渐进 增强 设计 ， 同 时 为 老 版 本 浏览 器 提供 合理 的 
降级 处 理 。 

















CSS3 如 何 解决 日 常设 计 问题 


我 们 来 看 一 个 在 大 多 数 项 目 中 都 会 遇 到 的 设计 问题 给 界面 元 素 创建 圆 角 效果 ， 可 能 
是 设计 选项 卡 式 界面 , 也 可 能 是 给 诸如 头 部 这 样 的 块 状元 素 应 用 圆 角 。 在 CSS 2.1 中 可 以 
使 用 滑动 门 技术 ( http://www.alistapart.com/articles/slidingdoors/ ) 来 实现 ， 即 将 一 张 背 景 
图 片 放 在 另 一 张 后 面 。 对 应 的 HTML 代码 比较 简单 : 

«a hrefz's'»«span»Box Title«/span»«/a» 

为 了 给 <a > 元 素 添 加 圆 角 背景 ， 我 们 需要 制作 两 张 图 片 。 第 一 张 叫 做 headerLeft,png， 
15 像素 宽 40 像素 高 ; 第 二 张 叫做 headerRi ght.png， 宽 度 要 超过 头 部 可 能 设 定 的 最 大 
宽度 ( 本 例 中 宽度 为 280 像素 )。 两 张 图 片 合 起 来 组 成 滑动 门 。 当 元 素 宽度 增加 时 (<span> 
标签 内 的 文字 增加 )， 背景 图 片 会 填 满 背景 空间 ， 这 样 就 形成 了 一 个 普遍 适用 的 圆 角 解决 
方案 。 下 面 是 本 例 中 的 css 代码 : 


a { 
display: block; 
height: 40px; 
float: left; 
font-size: 1.2em; 
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padding-right: 0.8em 
background: url(images/headerRight.png) no-repeat scroll top right; 


span ( 

background: url(images/headerLeft.png) no-repeat; 
display: block; 

line-height: 40px; 

padding-left: 0. 8em; 

} 


Google Chrome 浏览 器 〈v16 ) 中 的 效果 如 下 : 


w% 





C) Rounded Corners Sliding D 


s Œ | Q file:///Users/benfrain/Doc... 家 O 闷 














上 面 的 方法 解决 了 设计 问题 ， 但 却 需要 增加 一 个 多 余 的 标签 ( 从 语义 上 看 <s pan> 标 签 没 
有 实际 意义 ) 和 两 次 额外 的 服务 器 端 HTTP 请 求 ( 两 张 图 片 ) 来 创建 屏幕 上 的 视觉 效果 。 
除 此 之 外 ， 我 们 还 可 以 使 用 CSS "9538" (Sprite) 技术 ， 将 两 张 图 片 合成 一 张 ， 然 后 使 
用 background-position 属性 来 调整 定位 ， 虽 然 这 样 还 可 以 节省 一 点 带宽 ， 但 仍然 不 
是 一 个 灵活 的 方案 。 如 果 客 户 要 求 圆 角 更 大 一 点 怎么 办 ?或 者 要 求 修改 颜色 怎么 办 ? 我 
们 必须 得 重新 修改 图 片 。 翡 哀 的 是 , 作为 前 端 设计 师 和 工程 师 的 我 们 , 在 CSS3 出 现 以 前 ， 
就 身 处 这 样 的 窘境 中 。 女士 们 先生 们 , 我 已 经 看 到 了 光明 的 未 来 , 那 是 由 CSS3 塑造 的 未 
来 ! 我 们 将 上 述 的 HTML 代码 简化 成 这 样 : 


«a hrefz'£'»Box Title«/ a» 











CSS 代码 改 为 如 下 所 示 : 
a { 

float: left; 

height: 40px; 


line-height: 40px; 

padding-left: 0. 8em; 

padding-right: 0. 8em; 

border-top-left-radius: 8px; 
border-top-right-radius: 8px; 
background-image: url(images/headerTi ny. png); 
background-repeat: repeat-x; 
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下 面 的 效果 图 展示 了 在 同样 的 浏览 器 (Chrome v16) 中 呈现 的 CSS3 版 的 圆 角 按钮 效果 : 





rounded-corner.html 


c GC © file:;///Users/benfrain/Doc... 3? [1 EN 














在 上 面 的 代码 中 ， 先 前 的 两 张 图 片 已 被 替换 为 一 张 沿 x 轴 平 铺 的 1 像素 宽 图 片 。 虽 然 图 
片 只 有 1 像素 宽 ,， 但 高 度 仍然 是 40 像素 ， 比 任何 可 能 出 现在 其 中 的 元 素 都 高 。 在 使 用 图 
片 作为 元 素 背 景 时 ， 一 定 要 对 其 高 度 “ 高 度 注 意 " ， 以 预防 内 容 溢 出 。 不 笠 的 是 ， 这 样 会 
产生 更 大 的 图 片 ， 需 要 更 多 带宽 。 尽 管 如 此 ， 和 先前 完全 使 用 图 片 的 解决 方案 不 同 的 是 
CSS3 提供 了 border-radius 及 其 相关 属性 来 帮助 我 们 设置 圆 角 。 客 户 想 让 圆 角 更 平 ; 
一 点 ， 比 如 改 成 12 像素 ? 没 问题 ， 只 需要 将 bor der-radius 的 属性 值 改 为 12px ， 
定 ! CSS3 的 圆 角 属性 简单 、 灵 活 ， 并 且 Safari (v3+), Firefox ( v1+ )、Opera (v10.5+ 
Chrome (v3+ ) 和 Internet Explorer 9 ( 及 IE 10) 都 支持 它 。 微 软 对 下 9 能 够 支持 这 个 
性 得 意 洋洋 (我 希望 你 能 感受 到 我 在 此 处 所 表达 的 一 丝 讽 刺 )， 他 们 甚至 专门 设计 了 一 个 
交互 页 面 来 演示 使 用 bor der -radius 属性 能 达到 的 各 种 效果 。 演 示 页 面 的 地 址 如 下 : 
http://ie.microsoft.com/testdrive/html5/borderradius/default.html 

CSS3 可 以 更 进一步 ,不 再 需要 渐变 背景 图 片 ， 而 是 使 用 浏览 器 泻 染 的 效果 。 浏 览 絮 对 这 
个 特性 的 支持 不 是 很 好 , 但 按照 | i near-gradi ent(yellow, blue) 这 个 基本 思路 , ff 
意 元 素 的 背景 都 可 以 用 CSS3 生成 的 渐变 来 泻 染 。 


渐变 可 以 设 定 为 纯色 ， 即 传统 的 HEX 颜色 值 (如 #BFBFBF ); 也 可 以 使 用 任何 一 种 CSS3 
颜色 模式 ( 更 多 详情 请 见 第 5 章 )。 如 果 你 想 给 老 版 本 浏览 器 的 用 户 设置 蔡 换 渐变 的 纯色 
背景 ( 否则 他 们 看 不 到 任何 背景 ), 如 下 所 示 的 CSS 代码 可 以 给 不 支持 渐变 的 浏览 器 提供 
一 个 纯色 背景 : 


background-color: $42c264; 

background-image: -webkit-linear-gradient(44fec50, 4$42c264); 
background-image: -moz-linear-gradient(£4fec50, $42c264); 
background-image: -o-linear-gradient(s4fec50, $42c264); 
background-image: -ms-linear-gradient(s4fec50, $42c264); 
background-image: -chrome-linear-gradient($4fec50, 4$42c264); 
background-image: linear-gradient($4fec50, #42c264); 
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linear-gradient 属性 会 指示 浏览 器 从 第 一 个 颜色 值 ( 即 例子 中 的 #4fec50 ) 开始 ， 


渐变 至 第 二 个 颜色 值 (#420264 )。 








你 可 能 注意 到 了 ,CSS 代码 中 的 background-image:linear-gradient 属性 使 用 不 同 
前 级 ( 例如 - webkit- ) 重复 了 多 次 。 这 种 写法 允许 不 同 的 浏览 器 ( 包括 - moz- 代表 的 
Mozilla Firefox, - ms - 代表 的 Microsoft Internet Explorer 等 ) 厂商 在 发 布 正式 版 本 之 前 之 
前 ,试验 各 自 对 CSS3 新 特性 的 实现 , 正式 版 本 发 布 后 就 不 再 需要 前 级 。 遵 循 样式 表 的 层 
至 特性 ， 我 们 将 无 前 级 的 代码 放 在 最 后 ， 这 样 如 果 该 特性 可 用 ， 则 会 覆盖 之 前 的 声明 。 





1.8 AH, TARK 





下 面 的 截图 展示 了 在 同样 的 浏览 器 中 完全 使 用 CSS3 制作 的 按钮 效果 ; 




















|.) rounded-corner.html 


和 Œ © file:///Users/benfrain/Doc.. 家 口 X 

















图 片 版 和 纯 CSS 版 之 间 的 视觉 差异 微不足道 ， 我 想 这 点 你 应 该 同意 。 相 较 于 使 用 图 片 ， 
使 用 CSS3 制作 视觉 效果 能 使 我 们 的 响应 式 设 计 更 加 简洁 。 而且, 现代 浏览 器 都 能 很 好 地 
支持 渐变 ， 唯 一 需要 权衡 是 那些 对 渐变 支持 不 怎么 到 位 的 浏览 需 ， 如 TE 9 以 及 更 低 版 本 

















的 正 。 


CSS3 还 带 来 了 什么 





刚才 ,我 们 欣赏 了 一 个 CSS3 能 帮助 我 们 完成 的 日 常 工作 的 小 例子 。 接 下 来 , 我 们 想 尝 尝 


开胃 大 菜 ， 看 看 CSS3 能 带 给 我 们 什么 美 

















Uk. JH) Safari 或 Chrome ， 访 问 





http://www.panic.com/blog/。 遗 憾 的 是 这 个 网 页 不 是 响应 式 设计 ， 我 们 关心 的 区 域 是 页 面 
上 方 的 那 一 排 记事 贴 。 把 鼠标 其 停 在 上 面 就 可 以 看 到 它们 浮 起 来 。 很 帅 吧 ? 过 去 ， 这 种 
增强 效果 一 般 都 要 靠 策 重 的 Flash 或 者 JavaScript 实现 。 而 现在 则 可 以 完全 通过 CSS3 的 
变换 来 实现 。 使 用 CSS3 制作 动画 比 JavaScript 或 Flash 更 轻 量 级 ， 更 好 维护 ， 因 此 对 响 
应 式 设 计 来 说 很 理想 。 支 持 该 特性 的 浏览 器 会 显示 效果 ， 不 支持 的 则 装 傻 跳 过 ， 仅 将 其 





看 做 一 张 静 态 图 片 而 已 。 
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Yy Incredible brunch at Tasty n Sons to celebrate Dave's 10th Panic Year. In year one he coded on our couch In the apartm... 





CONS 


‘Ponit In 


Go to “http;/ /www.panic.com/blog/2010/11/15-secrets-of-transmit/" 
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Follow us on Twitter! 上 











Retro Artwork 


Annotate web pages in Satari 





FROM THE DESK OF CABEL 
PORTLAND, OREGON 97205 


"eei end 


Thanks, lan! 


July 29th, 2011 


The story of how we hired lan, one of our Cocoa engineers, is a nice piece 
of life. 


When Panic's headcount was two — me and Steve — the first thing we 
needed help with was tech support, but the idea of finding and hiring an 
employee was overwhelming. (It still is, really.) Riding my bike through 
downtown Portland late one night, a girl flagged me down to ask which bus 
might take her to her friend's house. My knowledge of Tri-Met is limited to 
the one line | use and which seats have the least crust, so | 一 stay with me 
here — instead suggested we could walk to my car and drive. On the way, 
she asked me what | did. and when | mentioned computers. she said "Oh. I 














另 一 个 优秀 的 CSS3 动画 范例 是 http://demo.marcofolio.net/3d_animation_css3。 这 个 网 站 也 
不 是 响应 式 设计 ,但 我 们 只 关心 其 中 用 到 的 CSS 技巧 。 先 在 Internet Explorer 9 或 者 Firefox 
中 看 看 (9.0 版 本 以 前 , Firefox 还 不 支持 该 CSS3 模块 ), 然后 在 Safari 5+ 或 者 Chrome 16+ 
中 看 看 效果 。 下面 的 截图 效果 未 尽 其 意 , 如 果 你 不 准备 亲自 欣赏 , 那 你 得 相信 我 的 话 一 一 





确实 很 赞 : 
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€ hitp: / | deme. emarcololic.net/3d animation e333/ » 





any of those browers, visit the article to see a video of tne effect. 


"Tux Lavr Aun 


Ine story follows the. 
adventures of Aang., a young 
Successor 1o a long Ine of 
Avatars, who must put his. 

















酷 炫 的 效果 不 仅仅 只 是 Webkit 核心 的 Safari 和 Chrome 浏览 器 的 专利 。 下 面 的 例子 在 
Firefox 中 也 很 炫 ， 而 且 也 是 纯 CSS3 实现 的 : http://designlovr.com/ examples/dynamic_ 


stack, of index_cards/。 




















4 a desigelovr.com re - 4 ft D- 


| ose css to Create a Dynamic 3 [+] 
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1.9 


1.10 





显然 ， 这 些 效果 不 是 每 个 网 站 都 必需 的 。 它 们 是 “渐进 增强 ”的 完美 印证 。 在 不 支持 特 
殊 效果 的 浏览 絮 里 ， 用 户 只 会 看 到 静态 的 图 片 。 但 使 用 现代 浏览 器 的 用 户 则 可 以 享受 增 
强 的 视觉 效果 。 虽 然 支持 CSS3 3D 变换 的 浏览 器 非常 有 限 , 但 支持 诸如 文字 阴影 、 渐 变 、 
[:1f8 . RGBA 颜色 和 多 重 背景 图 片 等 CSS3 效果 的 浏览 需 则 非常 多 , 这 为 解决 常年 来 令 我 
们 挠 头 的 设计 问题 提供 了 灵活 的 方法 。 





HTML5 和 CSS3 现在 就 能 用 吗 


任何 工具 或 技术 都 应 该 只 在 应 用 程序 需要 它 的 时 候 使 用 。 做 为 前 端 工程 师 /设计 师 ， 我 们 
的 项 目 往 往 因 为 财务 预算 而 受到 时 间 和 资源 上 的 限制 。 


Internet Explorer 7 和 8 都 不 支持 HTMLS 新 的 语义 元 素 ， 也 不 支持 CSS3 的 新 属性 。 如 果 

一 个 网 站 的 绝 大 多 数 用 户 都 使 用 Internet Explorer 7 或 8, 那 花费 精力 将 其 做 成 基于 HTML5 

和 CSS3 的 响应 式 设计 没有 大 大 意义 。 但 这 并 不 意味 着 我 们 做 不 到 。 第 9 章 在 讨论 跨 浏览 

器 响应 问题 时 ， 会 介绍 一 些 刚 刚 涌现 的 新 工具 ( 因为 它们 是 用 于 修补 旧 浏 览 器 缺陷 的 ， 

所 以 也 被 称 为 polyfill ), 用 来 修补 那些 不 支持 现代 浏览 器 特性 的 老 昌 浏览 需 ( 主要 是 老 旧 

的 下 )， 但 最 好 是 从 一 开始 就 采取 切实 可 行 的 方法 来 实现 响应 式 设 计 。 

以 我 的 经 验 ， 一 开始 通常 会 问 自己 以 下 问题 。 

口 客户 是 否 想 支持 互联 网 用 户 增 长 最 迅猛 的 市 场 ? 如 果 想 ， 那 响应 式 方法 就 很 适合 。 

口 客户 是 否 想 要 最 简洁 、 快 速 ， 且 易于 维护 的 代码 ? 如 果 想 ， 那 响应 式 方法 就 很 适合 。 

口 客户 能 和 否 理解 用 户 体验 可 以 且 本 应 该 根据 浏览 器 不 同 而 不 同 ? 如 果 可 以 理解 ， 那 响应 

式 方法 就 很 适合 。 

口 客户 是 否 要 求 设计 效果 在 所 有 浏览 右 中 都 保持 一 致 , 包括 IE 8 以 及 更 低 版 本 ? 如 果 是 ， 

响应 式 设计 就 不 适合 。 

口 该 网 站 的 当前 或 预期 客户 中 ， 是 否 有 百 分 之 七 十 以 上 的 人 可 能 使 用 Internet Explorer 8 
或 者 更 低 版 本 ? 如果 是 ， 则 响应 式 设 计 不 适合 。 

再 次 重申 ， 在 预算 允许 的 情况 下 ， 一 个 完全 定制 的 “移动 ”版 网 站 比 啊 应 式 设计 更 适合 。 

澄清 一 下 ， 我 将 那些 完全 专注 移动 平台 、 为 移动 设备 用 户 提供 不 同 内 容 /体验 的 解决 方案 

称 之 为 “移动 网 站 ”。 提 倡 响应 式 设计 方法 的 人 ,不 会 都 认为 响应 式 设计 在 任何 情况 下 都 

可 以 替代 “移动 网 站 ”。 



















































































响应 式 网 页 设计 不 是 灵丹妙药 


虽然 有 点 “人 驳 参 给 婆婆 拜年 一 多 此 一 举 "， 但 还 是 有 必要 再 重申 一 遍 : 使 用 HTMLS 和 
CSS3 的 响应 式 网 页 设计 不 是 解决 所 有 设计 和 内 容 服务 问题 的 灵丹妙药 。 和 以 往 的 网 页 设 
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计 一 样 ， 项 目的 具体 情况 〈 即 预算 、 目 标 用 户 以 及 网 站 用 途 ) 决定 了 其 实现 方式 。 根 据 
我 的 经 验 ， 如 果 预 算 有 限 或 开发 一 个 完全 定制 的 “移动 网 站 ”不 太 可 行 ， 那 么 响应 式 网 
页 设计 较 之 标准 的 固定 宽度 设计 ， 总 能 提供 更 好 的 和 无 歧视 的 用 户 体验 。 








引导 客户 : 网 站 不 必 在 所 有 浏览 器 中 表现 一 致 


着 手 响应 式 设计 之 前 ， 要 跨越 的 最 后 一 道 障碍 往往 是 思维 定式 。 而 且 在 某 些 情况 下 ， 这 
ou T 
和 jQuery 构造 的 标准 网 页 。 依 我 的 经 Deo 通常 只 会 考虑 固 
定 宽 度 “ 桌 面 版 ”网 站 ， = s 有 ,意思 是 从 来 没 见 过 )。 
接着 我 的 职责 就 是 在 所 有 浏览 器 中 以 像素 级 别 还 原 该 设计 。 这 项 作 务 的 最 终 成 败 取决 于 
客户 以 及 平面 设计 师 的 眼光 。 这 种 想法 在 有 平面 印刷 设计 背景 的 客户 那里 更 是 根深 带 固 。 
他 们 的 想法 很 好 理解 .客户 签字 认同 了 设计 图 ， 然 后 将 其 交 给 你 、 我 这 样 的 前 端 设计 师 / 
pis 之 后 我 们 投入 时 间 来 确保 最 终 代 码 在 所 有 主流 浏览 器 中 的 显示 效果 与 原始 设计 
能 接近 一 一 客户 所 见 就 是 客户 所 得 。 


如 果 你 尝试 过 让 一 个 现代 网 页 设计 在 Internet Explorer 6、7 中 ， 和 在 Safari、Firefox 
Chrome 等 现代 浏览 器 中 的 表现 完全 一 致 ， 你 就 会 知道 什么 叫 “ 者 道 之 难 ， 难 于 上 青 

了 。 我 经 常会 用 整 Eur. NIME UE 
Eo REREH Dopo e A EA] BUE CD] V HP 3T Ah e s UCET, TANTI 
该 浪费 在 为 越 来 越 少 的 Internet Explorer 用 户 修补 代码 ， 绞 尽 脑 计 地 生 造 出 圆 角 、 透 明 图 
片 、 正 确 对 齐 的 表单 元 素 等 效果 。 


遗憾 的 是 ， 解 决 这 个 问题 的 唯一 方法 就 是 说 服 引 导 。 客 户 需 要 明日 为 什么 应 该 支持 响应 
式 设计 ， 响 应 式 设 计 的 结果 如 何 ， 为 何 最 终 设计 不 会 也 不 应 在 所 有 视 口 和 浏览 右 中 表现 一 
S, 有 些 客户 能 理解 ， 有 些 则 不 能 。 翡 剧 的 是 ， 有些 客户 仍然 坚持 要 求 在 Internet Explorer 6 
中 也 要 有 一 模 一 样 的 圆 角 和 投影 效果 。 


当 我 接手 一 个 新 项 目 时 ， 不 论 响应 式 设计 是 否 适合 ， 我 都 会 试 着 给 客户 说 明 以 下 几 点 。 


a 允许 页 面 显 示 效 果 在 老 旧 浏览 器 中 有 细微 的 差别 ， 这 样 可 以 使 代码 更 易 维护 ， 将 来 更 
新 的 成 本 也 更 低 。 

口 让 页 面 元 素 在 那些 老 上 昌 浏 览 器 ( 如 Internet Explorer 8 及 更 低 版 本 ) 中 表现 一 致 会 导致 
网 站 增加 大 量 的 图 片 。 这 会 使 网 站 变 慢 ， 制 作成 本 变 高 ， 而 且 更 难 维护 。 

口 现代 浏览 器 可 以 理解 的 简洁 代码 等 同 于 更 快速 的 网 站 。 人 快速 响应 的 网 站 在 搜索 引擎 中 
的 评级 高 于 慢 腾腾 的 网 站 。 

口 使 用 老 旧 浏览 器 的 用 户 越 来 越 少 ， 使 用 现代 浏览 器 的 用 户 越 来 越 多 一 一 我 们 应 该 支持 
大 多 数 ! 







































































图 灵 社 区 会 员 lemoggy(lemoggy@foxmail.com) FF 尊重 版 权 





22 * 13 HTMLS, CSS3 及 响应 式 设计 入 门 








口 最 重要 的 一 点 ， 支 持 现 代 浏 览 器 ， 你 就 能 尽情 地 享受 响应 式 网 页 设计 ， 它 能 响应 不 同 
设备 的 不 同 浏览 器 视 口 。 


1.12 小 结 


本 童 ， 我 们 介绍 了 什么 是 响应 式 设 计 ， 并 且 欣 赏 了 已 有 的 优秀 啊 应 式 设 计 范 例 。 这 些 设 
计 都 是 使 用 我 们 将 在 本 书 中 讲解 的 工具 和 技术 构建 的 。 我 们 也 已 认同 ， 以 桌面 电脑 为 中 
心 的 设计 思想 ,应 该 转变 成 为 未 知 设备 而 设计 的 思想 。 首 先 为 最 小 的 可 视 区 域 设 计 版 式 ， 
然后 在 此 基础 上 渐进 增强 用 户 体验 。 通过 了 解 新 的 HTML5 规范 , 我 们 确定 HTMLS 的 大 
部 分 内 容 可 用 ， 而 且 能 够 发 挥 其 优势 。 换 名 话说 ， 新 的 语义 标签 允许 我 们 使 用 更 简洁 的 
代码 创建 比 以 往 更 具 语 义 的 网 页 。 


实现 响应 式 设计 的 关键 技术 是 CSS3。 在 使 用 CSS3 添加 渐变 、 圆 角 、 文 字 阴 影 和 动画 等 
视觉 效果 之 前 ,首先 要 让 它 来 扮演 一 个 更 重要 的 角色 , 那 就 是 利用 CSS3 的 媒体 查询 ， 针 
对 特定 的 视 口 设置 特定 的 CSS 规则 。 下 一 章 我 们 将 开始 “响应 式 网 页 设计 ”的 探索 之 旅 。 
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媒体 查询 : 支持 不 同 的 视 口 

















如 上 一 章 所 述 ，CSS3 是 由 很 多 附加 模块 组 合 而 成 的 。 媒 体 查 询 就 是 其 中 的 一 个 模块 。 媒 
体 查询 可 以 让 我 们 根据 设备 显示 器 的 特性 为 其 设 定 CSS 样式 。 例 如 ， 我 们 仅 使 用 几 行 代 
码 ， 就 可 以 根据 诸如 视 口 宽度 、 屏 幕 比 例 、 设 备 方向 〈 横 向 或 纵向 ) 等 特性 来 改变 页 面 
内 容 的 显示 方式 。 

AXE 

口 理解 为 什么 响应 式 设 计 需 要 媒体 查询 

口 如 何 构造 CSS3 媒体 查询 

口 我 们 能 够 检测 哪些 设备 特性 

口 编写 第 一 个 CSS3 媒体 查询 

口 为 特定 视 口 设 定 CSS 样式 

口 如 何在 iOS 和 Android 设备 上 使 用 媒体 查询 











现在 就 能 使 用 媒体 查询 


媒体 查询 已 经 被 广泛 使 用 , 而 且 也 被 浏览 器 广泛 支持 ( 如 Firefox 3.6+、Safari 4+, Chrome 4+, 
Opera 9.5+、iOS Safari 3.2+ 、Opera Mobile 10+, Android 2.1+ 和 Internet Explorer 9+ )。 此 外 ， 
要 对 老 版 本 浏览 器 如 Internet Explorer 6、7 和 8 实现 兼容 修复 ( 虽然 基于 JavaScript ) 也 
很 容易 。 如 果 你 现在 想 对 Internet Explorer 6, 7 和 8 进行 兼容 修复 ， 可 以 查阅 第 9 章 关 于 
解决 跨 浏览 器 响应 问题 的 内 容 。 总 之 ,没有 什么 理由 能 阻碍 我 们 现在 使 用 媒体 查询 。 



































W3C 对 规范 有 一 套 完 整 的 审批 流程 (如 果 你 有 空 , 可 以 去 看 看 该 流程 的 
官方 说 明 ， 地 址 : http://www.w3.org/2005/10/Process-20051014/tr )， 从 工 
作 草 案 (Working Draft, WD )， 到 候选 推荐 标准 (Candidate 
Recommendation, CR )， 再 到 提议 推荐 标准 ( Proposed 
Recommendation, PR), JLfEZ Ia. 才能 成 为 W3C 推荐 标准 (RECO. 
所 以 那些 相对 成 熟 的 模块 使 用 起 来 比较 安全 。 比 如 ，CSS3 变换 模块 
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Level 3 ( http://www.w3.org/TR/css3-3d-transforms/ ) 从 2009 年 3 月 
直 处 于 工作 草案 状态 ， 相 对 于 候选 推荐 标准 的 媒体 查询 模块 ， 浏 
持 远 远 不 足 。 


2.2 为 什么 响应 式 设 计 需 要 媒体 查询 


没有 CSS3 的 媒体 查询 模块 ， 就 不 能 针对 设备 特性 ( 如 视 口 宽度 ) 设置 特定 的 CSS 样式 。 
如 果 你 仔细 研读 W3C 关于 CSS3 媒体 查询 模块 的 规范 ， 就 会 看 到 媒体 查询 的 官方 解释 : 


HTML4 和 CSS2 目前 支持 为 不 同 的 媒体 类 型 设 定 专 有 的 样式 表 。 比如， 一 个 页 
面 在 屏幕 上 显示 时 使 用 无 衬 线 字体 ， 。 使 用 衬 线 字体 。s creen 和 
print 是 两 种 已 定义 的 媒体 类 型 。 媒 体 查 询 让 样式 表 有 更 强 的 针对 性 ， 扩 展 了 
媒体 类 型 的 功能 


媒体 查询 由 媒体 类 型 和 一 个 或 多 个 检测 媒体 特性 的 条 件 表 达 式 组 成 。 媒 体 查询 
中 可 用 于 检测 的 媒体 特性 有 width、height color (等 )。 使 用 媒体 查询 ， 
可 以 在 不 改变 页 面 内容 的 情况 下 ， 为 特定 的 一 些 输 出 设备 定制 显示 效果 。 


2.2.1 媒体 查询 语法 
CSS 媒体 查询 到 底 长 什么 样 ， 更 重要 的 是 ， 它 是 怎么 起 作用 的 ? 


将 下 面 这 段 代码 插入 到 任意 某 个 CSS 文件 的 最 后 ， 然 后 预览 与 之 关联 的 网 页 : 


body ( 
background-color: grey; 
} 
@media screen and (max-width: 960px) { 
body { 
background-color: red; 
} 
} 
@media screen and (max-width: 768px) { 
body { 
background-color: orange; 
} 
} 
@media screen and (max-width: 550px) { 
body { 
background-color: yellow; 
} 
} 
@media screen and (max-width: 320px) { 
body { 
background-color: green; 
} 
} 
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在 现代 浏览 器 (如果 是 正 ， 至 少 要 IE9 ) 中 浏览 该 网 页 并 不 断 调整 浏览 器 窗口 宽度 。 页 
面 的 背景 颜色 就 会 根据 当前 的 视 口 尺寸 而 发 生变 化 。 为 了 清晰 起 见 ， 我 在 这 里 使 用 了 颜 
色 名 称 ， 但 实际 上 最 好 使 用 十 六 进 制 颜色 值 ， 如 ##fffff 。 

接 下 来 ， 让 我 们 继续 分 析 媒 体 查询 ， 学 习 如 何 对 其 进行 充分 利用 。 


如 果 经 常 使 用 CSS 2 样式 表 , 你 就 知道 可 以 通过 <1 i nk > 标签 的 medi a 属性 为 样式 表 指 定 
设备 类 型 ( 如 显示 屏 或 打印 机 )。 具 体 说 来 ， 就 是 在 HTML 页 面 的 <head> 标 签 中 插入 一 
个 如 下 面 代 码 片 段 所 示 的 1ink 标签 : 


«link rel="stylesheet" type="text/css" media="screen" hrefz'screen-styles.css'» 


媒体 查询 则 能 使 我 们 根据 设备 的 各 种 功能 特性 来 设 定 相应 的 样式 ， 而 不 仅仅 只 针对 设备 
类 型 。 可 以 将 媒体 查询 想象 成 对 浏览 器 的 提问 。 如 果 浏 览 吉 回答 “是 ”， 则 应 用 样式 ;如 
果 回 答 是 “ 否 ”， 则 不 应 用 样式 。 相 对 于 在 CSS 2 中 能 且 只 能 问 浏览 器 “你 是 一 块 显 示 屏 
吗 ?”， 媒 体 查 询 能 问 的 问题 要 多 一 点 。 例 如 ， 媒体 查 询 可 以 问 :“ 你 是 一 块 纵向 放置 的 
显示 屏 吗 ? ”我们 看 看 对 应 的 实际 代码 : 


«link rel="stylesheet" media="screen and (orientation: portrait)" hrefz'portrait- 
screen.css" /> 


首先 , 媒体 查询 表达 式 询问 了 媒体 类 型 ( 你 是 一 块 显 示 屏 吗 ? ) 然后 询问 了 媒体 特性 C 显 
示 屏 是 纵向 放置 的 吗 ?) 任何 纵向 放置 的 显示 屏 设 备 都 会 加 载 portrait-screen.css 
样式 表 , 其 他 设备 则 会 忽略 该 文件 。 在 媒体 查询 的 开头 追加 not 则 会 颠倒 该 查询 的 逻辑 。 
例如 ,下 面 的 代码 就 会 颠倒 前 例 中 的 效果 ,会 使 非 纵 向 放置 的 显示 屏 设备 加 载 样式 文件 : 


«link rel="stylesheet" mediaz'not screen and (orientation: portrait)" hrefz'portrait- 
screen.css" /> 


也 可 以 将 多 个 表达 式 组 合 在 一 起 。 如 ， 我 们 扩展 一 下 前 面 的 例子 ， 限 制 只 有 视 口 宽度 大 
于 800 像素 的 显示 屏 设 备 才能 加 载 文件 。 


«link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 
800px)" hrefz'800wi de-portrait-screen.css" /> 


更 进一步 ， 还 可 以 写 一 个 媒体 查询 列表 。 查 询 列表 中 的 任意 一 个 查询 为 真 ， 则 加 载 文件 。 
全 部 查询 都 不 为 真 ， 则 不 加 载 。 例 子 如 下 : 


«link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 
800px), projection" hrefz'800wi de-portrait-screen.css" /> 


这 里 有 两 点 需要 注意 。 第 一 ， 媒 体 查询 之 间 使 用 逗号 分 隔 。 第 二 ， 你 会 注意 到 在 
projection 之 后 ,没有 and ， 也 没有 任何 特性 / 值 的 组 合 。 没 有 后 续 表 达 式 ， 意 味 着 只 
要 是 proj ecti on 就 满足 条 件 。 本 例 中 ， 样 式 会 应 用 于 所 有 的 投影 仪 。 

和 以 前 编写 CSS 规则 一 样 ， 基 于 媒体 查询 也 可 以 按 条 件 加 载 样式 。 在 上 面 的 例子 中 ,我 
们 在 向 页 面 的 <head></ head> 标 签 中 链接 CSS 文件 时 使 用 了 媒体 查询 。 除 此 之 外 , 我 们 
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还 可 以 在 CSS 样式 表 中 使 用 媒体 查询 。 例 如 ， 将 下 面 的 代码 插入 样式 表 ， 在 屏幕 宽度 小 
于 等 于 400 像素 的 设备 上 ,hl 元 素 的 文字 颜色 就 会 变 成 绿色 。 
@media screen and (max-device-width: 400px) { 
hl ( color: green } 
] 
还 可 以 使 用 CSS 的 @i mport 指令 在 当前 样式 表 中 按 条 件 引 入 其 他 样式 表 。 例 如 下 面 的 代 
码 会 给 视 口 最 大 宽度 为 360 像素 的 显示 屏 设 备 加 载 一 个 名 为 phone, css 的 样式 表 。 
Qi mport url("phone.css") screen and (max-wi dth: 360px); 
切记 ， 使 用 CSS 的 @i mport 方式 会 增加 HTTP 请 求 ( 这 会 影响 加 载 速度 ), E 
使 用 该 方法 。 
2.2.2 ”媒体 查询 能 检测 那些 特性 


创建 媒体 查询 时 ， 最 常用 的 是 设备 的 视 口 宽度 (wi dth ) 和 屏幕 宽度 (devi ce- width )。 

依 我 的 经 验 ， 很 少 需要 检测 其 他 特性 。 但 是 ， 为 方便 查阅 ， 下 面 列 出 了 所 有 可 供 媒体 查 

询 检 测 的 特性 ， 和 希望 其 中 有 能 让 你 心动 的 特性 。 

Qwidth: 视 口 宽度 。 

口 hei ght : 视 口 高 度 。 

口 device- width: 泻 染 表面 的 宽度 (对 我 们 来 说 ， 就 是 设备 屏幕 的 宽度 )。 

口 device-height : 演 染 表面 的 高 度 (对 我 们 来 说 ， 就 是 设备 屏幕 的 高 度 )。 

口 orientation: 检查 设备 处 于 横向 还 是 纵向 。 

Qaspect-ratio: 基于 视 口 宽度 和 高 度 的 宽 高 比 。 一 个 16 : 9 比例 的 显示 屏 可 以 这 样 

定义 aspect-ratio: 16/9, 

口 device-aspect-ratio: 和 aspect-ratio 类 似 ， 基 于 设备 演 染 平面 宽度 和 高 度 的 

宽 高 比 。 

口 col or : 每 种 颜色 的 位 数 。 例 如 mi n-color: 16 会 检测 设备 是 否 拥 有 16 位 颜色 。 

口 col or -index: 设备 的 颜色 索引 表 中 的 颜色 数 。 值 必须 是 非 负 整数 。 

Q monochrome : 检测 单 色 帧 缓冲 区 中 每 像素 所 使 用 的 位 数 。 值 必须 是 非 负 整数 ， 如 

monochrome: 2。 

Dresolution: 用 来 检测 屏幕 或 打印 机 的 分 辩 率 , 如 min-resolution: 300dpi 。 还 

可 以 接受 每 厘米 像素 点 数 的 度量 值 ， 如 mi n-resolution: 118dpcm. 

Oscan: 电视 机 的 扫描 方式 ， 值 可 设 为 progressive CZAR ) interlace (If 
行 扫描 ), 如 720p HD 电视 (720p 的 p 即 表明 是 逐 行 扫描 ) 匹 配 scan: progressive, 
而 1080i HD 电视 ( 1080i 中 的 i 表明 是 隔行 扫描 ) 匹配 scan: interlace。 

Ogrid: 用 来 检测 输出 设备 是 网 格 设备 还 是 位 图 设备 。 
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2.2.3 


2.2.4 


2.3 


在 上 述 所 有 特性 中 , 除 scan 和 grid 之 外 , 都 可 使 用 min 和 max 前 绥 来 创建 一 个 查询 范围 。 
例如 ,分析 如 下 所 示 的 代码 片段 : 


Qi mort url("phone.css") screen and (min-width:200px) and (max-width:360px); 
这 里 对 width 应 用 了 min 和 max 来 设 定 查 询 范 围 。 这 样 phone., css 文件 只 会 引入 视 口 
宽度 介 于 200 像素 至 360 像素 的 显示 屏 设 备 。 





用 媒体 查询 改造 我 们 的 设计 


毫 无 疑问 ， 你 肯定 知道 CSS 代表 层 盖 样式 表 。 所 谓 层 钱 ， 就 是 指 样式 表 中 后 面 的 样式 会 
和 覆盖 前 面相 同 的 样式 C 除非 前 面 的 样式 具有 更 高 的 针对 性 )。 因此 我 们 可 以 在 样式 表 的 开 
头 设置 基本 样式 ， 以 便 适应 所 有 设计 ， 然 后 使 用 媒体 查询 来 进一步 重 写 相应 的 部 分 。 例 
如 ， 先 针对 大 视 口 设计 ( 用 户 大 多 数 情 况 下 使 用 鼠标 ), 将 导航 链接 设计 成 简单 的 文字 链 


























Be; 然后 再 针对 较 小 的 视 口 ， 使 用 媒体 查询 重 写 这 部 分 样式 ， 为 拇指 一 族 提 供 更 大 的 点 
击 区 域 。 
加 载 媒 体 查 询 的 最 佳 方法 


现代 浏览 器 虽然 可 以 智能 地 忽略 与 自身 不 匹配 的 样式 文件 ， 但 它 却 不 一 定 不 下 载 这 些 文 
件 。 因 此 ， 将 不 同 媒体 查询 的 样式 保存 到 独立 的 文件 中 没有 太 大 好 处 〈 个 人 喜好 或 为 便 
于 组 织 代码 除外 )。 使 用 多 个 独立 的 文件 会 增加 用 于 页 面 演 染 的 HTTP 请 求 数 量 ， 从 而 导 
致 页 面 加 载 变 慢 。 

Respond.js ( https://github.com/scottjehl/Respond ) 是 为 Internet Explorer 8 及 更 低 版 本 增加 
媒体 查询 支持 的 最 快 的 JavaScript 工具 , 但 它 目 前 无 法 解析 CSS 的 @i mport 命令 。 因 此 ， 
建议 在 已 有 的 样式 表 中 追加 媒体 查询 样式 。 使 用 如 下 语法 即 可 在 已 有 样式 表 中 加 入 媒体 
查询 : 

@media screen and (max-width: 768px) {/* 样 式 */} 





我 们 的 第 一 个 响应 式 设 计 


不 知道 你 此 刻 怎么 想 ， 但 我 热切 地 淘 望 开始 设计 一 个 响应 式 网 页 ! 我 们 已 经 理解 了 媒体 
查询 的 原理 ， 那 就 让 我 们 试 着 驾驭 它们 ， 看 看 它们 在 实际 工作 中 如 何 发 挥 作 用 。 而 且 我 
正好 有 用 来 测试 的 项 目 。 下 面 请 允许 我 说 点 题 外 话 …… 

我 喜欢 电影 。 但 是 ,我 常常 发 现 自己 和 别人 的 观点 不 同 (或许 这 就 是 我 日 复 一 日 独居 一 
室 写 代码 的 原因 之 一 ) 尤其 是 关于 什么 是 好 电影 什么 是 烂 电 影 。 每 当 奥 斯 卡 奖 提名 宣布 
的 时 候 ， 我 经 常会 有 一 种 强烈 的 恶心 反胃 感 。 我 总 觉得 各 种 类 型 的 电影 都 应 获得 嘉奖 。 
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我 打算 自己 弄 一 个 名 叫 And the winner isn't 的 小 网 站 , 网 址 是 http://www.andthewinnerisnt. 
com/。 这 里 会 讲 奖 那些 本 应 获奖 的 电影 ， 批 评 那 些 〈 不 该 获奖 却 ) 获奖 的 电影 ， 这 里 还 
有 视频 剪辑 、 经 典 语录 、 电 影 海报 ， 以 及 能 证 明 我 没 错 的 在 线 调 查 ( 我 知道 没 必要 ,但 
我 喜欢 )。 
2.3.1 ”我们 的 设计 是 固定 宽度 的 ， 不 要 惊讶 


和 我 以 前 骂 过 的 那些 从 不 考虑 不 同 视 口 的 平面 设计 师 一 样 ， 我 开始 也 基于 960 像素 的 固 
定 宽度 网 格 制 作 一 个 界面 原型 。 虽 然 理 论 上 最 好 是 从 移动 (小 屏幕 ) 设备 的 体验 出 发 开 
台 设计 ， 然 后 渐进 增强 ， 但 实际 上 要 让 每 个 人 都 理解 这 种 思路 的 好 处 恐怕 还 需 几 年 时 间 。 
在 此 之 前 ， 更 多 的 可 能 是 要 将 现 有 的 桌面 版 网 页 设计 改造 成 响应 式 的 。 既 然 未 来 几 年 我 
们 可 能 都 会 这 样 做 ， 那 我 们 的 设计 还 要 从 固定 宽度 着 手 。 下 面 的 截图 展示 了 一 个 粗略 的 
国定 宽度 的 界面 原型 ; 
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将 这 个 设计 分 解 ， 可 以 看 到 它 有 几 个 简单 通用 的 结构 : 头 部 、 导 航 、 边 栏 、 内 容 区 和 页 
脚 。 恐 怕 你 每 周 都 会 构建 一 遍 类 似 的 结构 吧 。 

第 4 章 会 告诉 你 为 什么 应 该 使 用 HTML5 标签 。 不 过 此 时 我 将 略 过 这 点 ,因为 我 们 想 急切 
地 检验 刚 讲 的 媒体 查询 技巧 。 所 以 我 们 将 使 用 旧 的 HTML 4 标签 来 进行 我 们 的 第 一 次 媒 
体 查 询 试验 。 使 用 HTML 4 标签 编写 的 没有 实际 内 容 的 基本 页 面 结构 如 下 所 示 : 
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«I DOCTYPE html PUBLIC "-//W3C/] DTD XHTML 1.0 Transitional// EN" 
"http://www. w3.org/ TR/ xhtm 1/ DTD/ xhtml 1-transitional.dtd"» 

«html xmlnsz'http:// www. w3.0rg/ 1999/ xhtml" » 

«head» 

«meta http-equivz"Content- Type" contentz'text/html; charset=UTF-8" /> 
«title»And the winner isn't«/title» 

«link hrefz'css[main.css" rel="stylesheet" type="text/css" /> 

</head> 





<body> 


<div id="wrapper"> 
<!-- the header and navigation --> 
<div id="header"> 
<div id="navigation"> 
«ul» 
<li><a hrefz'£'»navigationl«/a»«[li» 
<li><a hrefz'£'»navigation2«[a»«[li» 
</ul> 

</div> 
«[ di v» 
<!-- the sidebar --> 
«div idz'sidebar'» 

«p»here is the sidebar«/p» 
«[ di v» 
<!-- the content --> 
«div idz'content'» 

«p»here is the content «/ p» 
«[ di v» 
<!-- the footer --» 

«div idz'footer'» 

«p»Here is the footer«/p» 

«[ di v» 





«I di v» 

«[ body» 

«[ ht ml > 

用 Photoshop 打开 设计 文档 ， 我 们 可 以 看 到 头 部 和 页 脚 都 是 940 像素 宽 ( 两 边 各 有 10 像 
素 外 边 距 )， 而 侧 边栏 和 内 容 区 分 别 占据 了 220 像素 和 700 像素 , 相应 地 两 边 也 各 自 有 10 
像素 的 外 边 距 。 
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VVVVVVVVVNVVVVVNVVVVVVNNYN 
AND THE WINNER IS 


WHY? — SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


UNSUNG HEROES... 1 EVERY YEAR 
mw Em S WHEN I WATCH THE 
TE 






OSCARS I'M ANNOYED... 


N € King Kong, Moulin 
Rouge and Munich € € 


Jul. pto. 


DVERHYPED NONSENSE... 


i | AR 
9. à | E | | 
idum.) Gin A THESE SHOULD HAVE WON >> 


NOTE. CUR OPINON 1$ ABSOLUTELY CORRÉCT. YOU ARE WRONG, EVEN IF VOU TINI VOU ARE RIGHT. THATS A FACT. DEAL WIE 


—AAAAAAAAAAAAAAAAAAAAAAAAA . 











首先 ， 我 们 要 在 CSS 中 给 页 面 主要 的 结构 模块 〈 头 部 、 导 航 、 侧 边栏 、 内 容 区 和 页 脚 ) 
设置 一 下 样式 。 在 插入 重 置 样式 之 后 ， 页 面 的 主体 CSS 代码 应 该 如 下 所 示 : 
#wrapper { 


margin-right: auto; 
margin-left: auto; 





width: 960px; 

} 

#header { 
margin-right: 10px; 
margin-left: 10px; 
width: 940px; 
background-color: #779307; 

} 

#navigation ul li { 
display: inline-block; 

} 

#si debar { 
margin-right: 10px; 
margin-left: 10px; 
float: left; 
background-color: #fe9c00 
width: 220px; 

} 

#content { 
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margin-right: 10px; 


float: right; 
margin-left: 10px; 

width: 700px; 
background-color: #dedede; 


} 


margin-right: 10px; 


margin-left: 10px; 

clear: both; 

background-color: #663300; 

width: 940px; 
} 
为 了 说 明 页 面 的 结构 ， 我 在 给 各 个 结构 模块 追加 额外 内 容 的 同时 ， 还 为 各 个 结构 模块 设 
置 了 不 同 的 背景 颜色 。 


重 置 样式 就 是 一 组 CSS 声明 ， 用 来 覆盖 不 同 浏 览 器 泻 染 HTML 元 素 时 
的 各 种 默认 样式 。 重 置 样式 一 般 会 被 加 入 到 主 样式 文件 的 开头 ， 用 来 将 
各 个 浏览 器 的 自 有 默认 样式 重 置 成 统一 表现 ， 确 保 样式 表 中 后 续 追 加 的 
样式 在 不 同 浏览 器 中 有 相同 的 显示 效果 。 世 界 上 没有 完美 的 重 置 样式 ， 
2p 许多 开发 者 都 有 自己 的 一 套 。 我 在 HTML4 页 面 中 使 用 的 重 置 样式 ， 是 
$s 在 Eric Meyer 的 原版 ( http://meyerweb.com/eric/tools/css/reset/ ) 基础 上 
加 上 了 我 的 一 些 个 人 偏好 及 技巧 ， 这 些 技巧 是 我 从 另外 一 些 天 才 如 Dan 
Cederholm ( http://simplebits.com ) 的 代码 里 学 来 的 。 如 果 你 现在 还 没 用 
过 重 置 样式 ， 那 么 强烈 建议 在 你 的 HTML4 文 档 开 头 插入 Eric 的 重 置 样 
式 。 我 觉得 针对 HTMLS 文档 有 更 好 的 选择 ， 如 normalize.css 
( http://necolas.github.com/normalize.css/ )， 第 4 章 会 详细 介绍 。 


在 一 个 视 口 大 于 960 像素 的 浏览 器 中 ， 页 面 的 基本 结构 应 如 下 所 示 : 





And the winner isn't 


4» fie: // Volumes /MacBF HDD/User /benfrain/Documents/Storage /articles/packt/responsiveCSS-HTMLS/ch2/code/ba - * C N- T a A D- 





LL And the winner isor, [*T 











n year wi walei ars l'm annoyed... 

that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. 
Not very Hollywood is it? 
We're here to put things right. 











还 有 好 几 种 使 用 CSS 制作 同样 效果 的 固定 宽度 左右 分 栏 结 构 的 方法 ， 你 肯定 有 自己 偏爱 
的 方法 。 不 过 这 些 方法 都 普遍 存在 一 个 问题 ， 当 视 口 缩减 到 小 于 960 像素 的 时 候 ， 右 侧 
的 内 容 区 就 开始 被 截断 。 
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2.3.2 ”响应 式 设计 中 要 保证 图 片 尽 可 能 精简 


为 了 说 明 上 述 代 码 结构 的 问题 ,我 已 经 提前 参照 设计 图 在 CSS 中 增加 了 一 些 装 饰 性 样式 。 
既然 要 做 响应 式 设计 ， 那 我 肯定 会 用 最 精简 的 办 法 来 切取 背景 图 片 。 例 如 ， 对 于 设计 图 
顶部 和 底部 的 小 彩旗 ， 我 不 会 制作 一 个 长 条 图 片 ， 而 只 是 切取 其 中 的 两 面 小 旗 。 这 个 切 
片 作为 背景 图 在 视 口 中 水 平 重复 ， 从 而 给 人 一 种 长 条 旗帜 图 片 的 错觉 ( 不论 视 口 有 多 宽 
都 行 ), 这 种 方法 为 两 处 背景 分 别 节省 了 16KB( 960 像素 宽 的 , png 长 条 旗帜 图 一 张 20KB， 
而 精简 的 切片 图 只 有 4KB ) 这 样 你 就 为 通过 手机 上 网 的 用 户 节省 了 一 部 分 流量 ! 下 图 展 
示 了 这 个 切片 图 输出 前 的 样子 (放大 到 了 600% ): 





























enn bunting-slice.png @ 600 (Layer 0, RGB/B) * 
Po "IRR... 











00 Doc 9.32K/12 4k Hm 





在 背景 图 片 和 文字 大 小 都 设置 停 当 之 后 ，And the winner isn’t.. Rui Và zs Hp B CR 
下 所 示 : 





/ [Voas [Miu WOO Ue bardan Deemerst /Yrspe artic /packtwpom © C a * n- 


| WEYTTVTYIVYVIVIVYVTTYYYYV 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 









UNSUNG HEROES... 1 EVERY YEAR 
AM WHEN I WATCH THE 
A.M OSCARS I'M ANNOYED.. 


that films like King Kong, 





QUTD: 





XY FT9«4 : 
T 


AMAA AAA AA AAA AAA AAA AAA: 


Coo 
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要 让 样式 完美 ， 还 有 很 多 工作 要 做 。 例 如 ， 导 航 按钮 颜色 应 该 交替 使 用 红色 和 黑色 ， 缺 

少 内 容 区 的 THESE SHOULD HAVE WON 按钮 和 侧 边栏 的 full info 按钮 ， 字 体 与 设计 图 

效果 相去 甚 远 。 不 过 ， 所 有 这 些 问题 都 可 以 使 用 HTMLS 和 CSS3 来 解决 。 使 用 HTMLS 

和 CSS3， 而 不 再 是 简单 插入 图 片 ( 如 我 们 以 前 做 过 的 那样 )， 会 使 网 站 与 我 们 的 响应 式 

目标 步调 一 致 。 时 刻 谨 记 ， 我 们 要 保证 代码 和 数据 都 尽 可 能 精简 ， 以 便 为 带宽 有 限 的 用 am 
户 提 供 愉 悦 的 体验 。 








2.3.3 jJMR DE TRÉUIAR SH 


现在 ， 我 们 把 美学 问题 放 在 一 边 ， 重 点 关注 一 下 当 视 口 缩减 至 小 于 960 像素 的 情况 ， 此 
时 正在 制作 的 首页 中 会 有 一 部 分 内 容 被 切 掉 。 








And the winner isn't 


| file:///Volumes/MacBF HDD/Users/benfrain, v ic B N Google Q 








NVYVYVYVYYVVYYY 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLI 


UNSUNG HEROES... EVE R5 
WHEN I WA 
OSCARS I'N 
that films like King K 
Munich get the statue 
heroes lose out. Not v 


We're here to put thir 


these should have won » 





NOTE: OUR OPINION IS ABSOLUTELY CORRECT. YOU ARE WRONG, EVEN IF YOU THINK YOU AF 





| 673x1007 | 
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2.4 


这 还 只 是 将 视 口 缩减 到 673 像素 宽 ,想象 一 下 网 站 在 iPhone 3GS 等 设备 上 将 会 有 多 难看 ? 
iPhone 3GS 的 显示 屏 大 小 只 有 320 x 480 像素 。 看 看 下 面 的 效果 图 : 











Carrier — 9:25 AM 
And the winner isn't... 





Jl tile///Volumes/MacBF 


AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOSICLIPS QUOTES QUIZ 


! EVERY YEAR 


NH N WAT( H THE 














喷 ， 等 等 ， 这 效果 看 着 挺 好 ， 或 者 说 还 行 …… 刚 才 你 还 说 会 难看 的 ! 这 是 因为 iOS 上 的 
Safari 浏览 器 默认 是 在 ee o 然后 将 画布 缩小 到 与 视 口 大 小 匹配 。 
虽然 得 放大 页 面 才能 看 清楚 ， 但 页 面 内 容 没 有 被 切 掉 。 怎 么 阻止 Safari 或 其 他 移动 浏览 
wa 














阻止 移动 浏览 器 自动 调整 页 面 大 小 


iOS 和 Android 浏览 器 都 基于 WebKit ( http://www.webkit.org/ ) 核心 。 这 两 种 浏览 器 以 及 
很 多 其 他 浏览 器 (如 Opera Mobile )， 都 支持 用 viewport meta 元 素 覆 盖 默 认 的 画布 缩放 设 
置 。 只 需要 在 HTML 的 <head> 标 签 中 插入 一 个 <met a> 标 签 。<met a> 标 签 中 可 以 设置 具 
体 的 宽度 ( 如 像素 值 ) 或 者 缩放 比例 如 2.0 (设备 实际 尺寸 的 两 倍 )。 下 面 是 一 个 将 页 面 
放大 到 设备 实际 尺寸 两 倍 显示 的 met a 标签 的 示例 : 


«meta name="viewport" contentz-'initial-scalez2.0,wi dthzdevice-wi dth" /> 
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将 这 个 "标签 插入 到 我 们 的 HTML 中 ， 如 下 面 的 代码 所 示 : 


«I DOCTYPE html PUBLIC "-//W3C/] DTD XHTML 1.0 Transitional// EN" 
"http://www. w3.org/ TR/ xhtm 1/ DTD/ xhtml 1-transitional.dtd'» 

«html xmlnsz'http:// www. w3.0rg/ 1999/ xhtml "> 

«head» 

«meta http-equivz"Content- Type" contentz'text/html; charset=UTF-8" /> 
«meta namez'viewport" contentz'initial-scalez2.0,wi dthzdevice- width" /> 
«title»And the winner isn't.«[title» 


然后 ， 在 Android 中 加 载 该 页 面 ， 显 示 效 果 如 下 所 示 : 


VVYY 


AND 
THE 
WINNE 


如 你 所 见 ， 这 并 不 是 我 们 最 终 想 要 的 效果 ， 但 这 个 夸张 的 效果 说 明了 我 们 讨论 的 问题 。 























安装 iOS 模拟 器 和 Android 模拟 器 
虽然 真 机 测试 无 可 替代 ,但 还 是 可 以 使 用 Android 和 iOS 模拟 器 .Windows、 
Linux 和 Mac 版 的 Android 模拟 器 都 可 以 免费 下 载 ,Android 软件 开发 工具 
Q &, (SDK ) 也 可 以 免费 安装 。 下 载 地 址 是 http://developer.android.com/sdk/。 
不 过 得 使 用 命令 行 安装 ， 需 要 你 有 一 颗 勇 敢 的 心 "。iOS 模拟 器 是 Xcode 
开发 包 (在 Mac App Store 中 免费 下 载 ) 的 一 部 分 ， 只 能 在 MacOSX 上 使 
用 。 一 旦 安装 了 Xcode, 你 就 可 以 在 这 个 路 径 下 找到 模拟 器 : -/Developer/ 
Platforms/iPhoneSimulator.platform/Developer/Applications iOS Simulator.app 


(a 
— 





中 最 新 Windows 版 能 够 可 视 化 安装 。 
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我 们 来 分 析 一 下 上 面 所 示 的 <met a > 标签 ， 以 理解 它 的 工作 原理 。name="viewport'" 属 
ERA mA contentz"initial-scalez2.0 的 意思 是 将 页 面 放 大 两 倍 ( 同 理 ，0.5 表 
示 缩 小 一 半 , 3.0 表 示 放 大 3 倍 ), 同时 wi dth=device-width 告诉 浏览 器 页 面 的 宽度 应 
该 等 于 设备 宽度 。 

«me t a > 标签 还 可 以 控制 页 面 可 缩放 的 范围 。 下 面 的 代码 允许 用 户 将 页 面 最 多 放大 至 设备 
宽度 的 3 倍 ， 最 小 压缩 至 设备 宽度 的 一 半 。 


«meta namez'viewport" contentz'widthzdevice-wi dth, maximum-scale-3, mini mum-scal e= 
0.5" /> 


你 还 可 以 禁止 用 户 缩放 ， 不 过 缩放 是 一 个 重要 的 辅助 功能 ， 所 以 在 实践 中 很 少 禁用 。 


«meta namez'viewport" contentz'initial-scalez1.0, user-scalablezno" /> 





jc 


























user-scalablezno 即 是 禁止 缩放 。 

现在 ， 我 们 将 缩放 比例 设置 为 10， 这 表示 浏览 器 将 按照 其 视 口 的 实际 大 小 来 泻 染 页 面 。 
将 宽度 设置 为 设备 宽度 ， 意 味 着 支持 该 特性 的 浏览 器 都 将 会 按照 设备 宽度 的 实际 大 小 来 
泻 染 页 面 。 下 面 是 我 们 最 终 将 要 使 用 的 <met a > 标签 : 

«meta namez'viewport" contentz"widthzdevice-width,initial-scalez1.0" /> 
在 竖 直 的 iPad 上 浏览 页 面 ， 可 以 看 到 还 是 有 一 部 分 内 容 被 剪 切 掉 了 ， 但 已 经 不 再 是 缩小 
版 的 页 面 了 ! 这 就 是 本 节 想 要 达到 的 目的 。 相 信 我 ， 这 是 个 进步 ! 















































AND THE WINNER IS 
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2.5 


鉴于 viewport 


的 @vi ewport 





同样 可 以 将 浏 


了 ， 而 是 可 以 在 CSS 中 编写 @vi ewport ( width: 
dor 有 些 浏览 器 已 


meta 标签 的 使 用 越 来 越 普遍 ，W3C 正 尝试 通过 CSS 引入 
同样 的 功能 。 可 以 访问 http://dev.w3.org/csswg/css-device-adapt/， 了 解 新 
声明 。 基 本 思路 是 不 用 在 <head> 标 签 中 添加 <met a> 标 签 


320px; 
经 支持 这 种 


) 声明 ， 


语法 (如 Opera Mobile )， 不 过 要 使 用 私有 前 级 ， 如 @- 0- vi ewport 
{ width: 320px; }。 


针对 不 同 视 口 宽度 修正 设计 


任何 浏览 器 都 不 再 缩放 页 面 了 ， 现 在 我 们 可 以 针对 不 同 视 口 
来 修正 设计 效果 。 首 先 在 CSS 中 为 平板 设备 (如 iPad ) 增加 媒体 查询 ， 竖 直 iPad 的 视 口 


设置 viewport meta 标签 后 ， 








宽度 是 768 像素 ( 横向 视 口 宽度 是 1024 像素 ， 此 时 页 面 泻 染 效果 很 理想 )。 























Qmedia screen and (max-width: 768px) ( 


*wrapper ( 
width: 768px; 
} 


#header, #footer, #navigation { 


width: 748px; 
) 
} 


媒体 查询 针对 视 口 宽度 不 大 于 768 像素 的 情况 ， 重 新 调整 了 外 壳 、 











等 页 面 元 素 的 宽度 。 下 图 展示 了 此 时 页 面 在 iPad 上 的 效果 : 
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页 脚 以 及 导航 
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上 图 的 效果 让 我 很 受 鼓舞 。 页 面 内 容 没 再 被 剪 切 ， 而 是 与 iPad 屏幕 (或 者 其 他 视 口 不 超 
过 768 像素 的 设备 ) 恰好 匹配 。 但 还 得 解决 导航 区 链接 超出 背景 图 和 主 内 容 区 浮动 在 侧 
边栏 之 下 ( 因为 内 容 区 太 宽 , 在 有 限 的 空间 内 放 不 下 ) 这 两 个 问题 。 我 们 再 修改 一 下 CSS 
中 的 媒体 查询 ， 代 码 片段 如 下 所 示 : 
Qmedia screen and (max-width: 768px) ( 
swrapper ( 
width: 768px; 
} 
#header, #footer, #navigation { 
width: 748px; 
} 
#content, #sidebar { 
padding-right: 10px; 
padding-left: 10px; 
width: 728px; 
} 
} 
现在 ， 侧 边栏 和 内 容 区 填 满 了 页 面 ， 且 两 边 各 留 有 适当 的 内 边 距 。 但 这 样 的 效果 并 不 引 
人 注目 。 我 想 把 内 容 放 在 前 面 ， 把 侧 边栏 放 在 后 面 〈 侧 边栏 的 重要 程度 一 般 不 高 )。 如 果 
说 我 正在 尝试 制作 一 个 真正 的 响应 式 设 计 ， 那 在 此 处 我 又 犯 了 一 个 低级 错误 。 
2.6 响应 式 设计 中 内 容 始终 优先 





我 们 想 让 设计 在 多 平台 多 视 口 的 情况 下 保留 尽 可 能 多 的 内 容 〈 而 不 是 使 用 display: 
none 或 类 似 方法 来 隐藏 部 分 内 容 )， 但 也 要 意识 到 内 容 模块 显示 顺序 的 重要 性 。 目 前 ， 
页 面 中 侧 边栏 和 主 内 容 区 标签 的 顺序 决定 了 侧 边栏 会 显示 在 主 内 容 区 前 面 。 显 然 ， 罕 视 
口 设 备 的 用 户 应 该 先 看 到 主 内 容 ， 而 后 再 看 到 侧 边栏 。 


我 们 还 可 以 (或 许 应 该 ) 将 内 容 区 移 到 导航 区 域 之 上 。 这 样 那 些 使 用 小 视 口 设备 的 用 户 
就 可 以 先 看 到 主 内 容 。 这 样 无 疑 是 坚决 贯彻 “内 容 优先 ”原则 的 合理 做 法 。 但 是 ， 多 数 
情况 下 每 个 页 面 顶部 还 是 应 该 有 导航 区 ， 所 以 我 乐得 只 将 HTML 代码 中 的 侧 边 栏 和 内 容 
区 位 置 互 换 一 下 ， 让 内 容 区 出 现在 侧 边栏 之 前 。 当 前 代码 结构 如 下 : 
«div idz'sidebar'» 

«p»here is the sidebar«/p» 
«I di v» 
«div idz'content'» 


<p>here is the content «/ p» 
«div» 


互 换 位 置 后 的 代码 如 下 : 


<div id="content"> 
<p>here is the content</p> 
«I di v» 
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«div idz'sidebar'» 
«p»here is the sidebar«/p» 
«| div» 


虽然 我 们 互 换 了 标签 位 置 ， 但 页 面 在 大 视 口 中 的 显示 效果 没有 变化 ， 因 为 侧 边 栏 和 内 容 
区 分 别 使 用 了 float:left 和 float'right 属性 。 但 是 在 iPad 上 ， 则 变 成 了 首先 显示 
内 容 区 ， 下 面 才 是 侧 边栏 。 


在 调整 好 标签 结构 的 顺序 之 后 ， 我 还 着 手 为 768 像素 宽 的 视 口 追加 并 替换 了 一 些 样 式 。 
现在 最 新 的 媒体 查询 代码 如 下 所 示 : 


Qmedia screen and (max-width: 768px) ( 
*wrapper, £header, dfooter, navigation ( 
width: 768px; 
margin: 0px; 
} 
#logo { 
text-align:center 

















} 

#navigation { 
text-align: center 
background-image: none 
border-top-color: #bfbfbf; 
border-top-style: double; 
border-top-width: 4px; 
padding-top: 20px; 

} 





#navigation ul 





a { 


background-color: #dedede; 
line-height: 60px; 
font-size: 40px; 

} 

#content, #sidebar { 
margin-top: 20px; 
padding-right: 10px; 
padding-left: 10px; 
width: 728px; 

} 

.0scarMain { 
margin-right: 30px; 
margin-top: 0px; 
width: 150px; 
height: 394px; 

} 

#si debar { 
border-right: none; 
border-top: 2px solid £e8e8e8 
padding-top: 20px; 
margin-bottom: 20px 

} 

.SideBlock { 
width: 46% 
float: left; 
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} 
.OverHyped ( 
margin-top: 0px; 
margin-left: 50px; 
} 
} 
此 处 添加 的 代码 只 会 对 视 口 等 于 或 小 于 768 像素 的 显示 屏 设备 起 作用 。 视 口 更 宽 的 设备 
会 忽略 这 些 代 码 。 另 外 ， 因 为 这 些 样式 放 在 文件 的 末尾 ， 所 以 会 覆盖 之 前 的 重 名 样式 。 
结果 就 是 视 口 大 的 设备 上 没有 什么 变化 ， 而 视 口 宽度 为 768 像素 的 设备 上 最 终 的 效果 如 
下 所 示 : 

















AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS 
VIDEOS/CLIPS QUOTES QUIZ 


t EVERY YEAR 


WHEN | WATCH THE 








OSCARS I'M ANNOYED... 
t Moulin Rouge and Munich 


it films like King Kon 


> whilst thc i natic 


UNSUNG HEROES... OVERHYPED NONSENSE... 
Jaor Z psu eus 
Fe E < < 
4 = MOULIN RONCGE 


不 消 阅 ,我们 没准 备 拿 什么 设计 大 奖 。 但 仅 通过 几 行 CSS 媒体 查询 代码 ， 就 为 不 同 的 视 
口 做 出 一 个 完全 不 同 的 布局 来 ， 这 还 是 挺 牛 的 。 这 些 代 码 都 是 什么 意思 呢 ? 
首先 ， 使 用 媒体 查询 将 所 有 内 容 区 宽度 置 为 全 屏 : 
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#wrapper, s&header, footer, £navigation { 
width: 768px; 
margin: 0px; 





} 
然后 是 一 些 美化 页 面 元 素 及 布局 的 样式 。 例 如 ， 如 下 代码 片段 改变 了 导航 区 大 小 、 布 局 
以 及 背景 ， 这 样 平板 用 户 可 以 更 方便 地 选择 导航 条 目 : EE 


$navigation ( 
text-align: center 
background-image: none 
border-top-color: #bfbfbf; 
border-top-style: double; 
border-top-width: 4px; 
padding-top: 20px; 

} 

#navigation ul li a { 
background-color: £dedede; 
line-height: 60px; 
font-size: 40px; 

} 


现在 ,同样 的 内 容 可 以 根据 视 口 大 小 以 不 同 的 布局 来 显示 了 。 媒 体 查 询 很 赞 ， 不 是 吗 ? 
太 值得 庆 视 一 下 了 。 当 你 开 香 槟 的 时 候 , 我 用 iPhone 看 了 看 页 面 的 效果 …… 如 下 图 所 示 : 























Carrier — 12:16 PM = 
| the winner isn't... 
file://NNolumes/Mac 


WHY? SYNOP 
VIDEOS/CLI 
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2.7 


我 们 


2.8 


媒体 查询 只 是 必要 条 件 之 一 


我 们 回顾 一 下 的 前 面 所 讲 的 内 容 。 很 显然 我 们 的 工作 还 远 未 结束 ， 网 站 在 iPhone 的 320 
像素 宽 的 小 视 口中 显示 得 很 糟糕 。 媒 体 查 询 尽 其 所 能 ,根据 设备 特性 应 用 了 对 应 的 样式 。 
但 问题 是 ， 现 有 的 媒体 查询 只 覆盖 了 小 范围 的 视 口 。 视 口 宽度 小 于 768 像素 的 设备 都 将 
看 到 内 容 被 剪 切 ， 而 视 口 介 于 768 像素 到 960 像素 之 间 的 设备 ， 则 会 使 用 未 受 媒体 查询 
样式 影响 的 原 有 样式 ， 结 果 我 们 已 经 知道 了 ， 一 旦 视 口 宽度 小 于 960 像素 ， 页 面 就 无 法 
匹配 (作者 抱 头 长 叹 )。 





























需要 流动 布局 





如 果 针 对 已 知 的 特定 访问 设备 ， 可 以 单独 使 用 媒体 查询 来 制作 理想 的 设计 效果 ， 我 们 已 
经 见 过 专门 适 配 iPad 有 多 简单 。 但 是 这 种 策略 有 严重 的 缺陷 ， 换 句 话说 ， 它 不 能 适应 未 
来 的 变化 。 目 前 的 情形 是 ， 页 面 捕捉 到 媒体 查询 设置 的 断 点 ， 然 后 布局 发 生变 化 。 但 在 
捕捉 到 下 一 个 视 口 断 点 之 前 ， 页 面 静止 不 变 。 我 们 需要 比 这 更 好 的 策略 。 针 对 各 种 视 口 
的 排列 组 合 编写 对 应 的 CSS 样式 ， 无 法 兼容 未 来 可 能 出 现 的 设备 ， 而 一 个 完美 的 设计 ， 
往往 能 在 一 定 程度 上 适应 未 来 的 发 展 。 在 这 点 上 我 们 目前 的 解决 方案 尚 不 完备 。 目 前 的 
效果 更 像 是 一 个 自 适 应 设计 ， 而 不 是 我 们 想 要 的 真正 的 响应 式 设 计 。 我 们 的 设计 应 该 在 
突变 之 前 保持 灵动 。 要 做 到 这 点 ， 需 要 将 采 板 的 固定 布局 修改 成 灵活 的 流动 布局 。 


















































小 结 

















本 章 我 们 学 习 了 什么 是 CSS3 媒体 查询 ， 如 何在 CSS 文件 中 引入 媒体 查询 ， 以 及 如 何 使 
用 媒体 查询 来 制作 响应 式 网 页 。 讨 论 了 如 何 让 移动 浏览 器 像 桌面 版 浏览 器 一 样 泻 染 我 们 
的 页 面 ， 另 外 还 谈 到 了 在 编写 页 面 标签 时 要 遵守 “内 容 优先 ”的 原则 。 此 外 还 学 习 了 在 
设计 中 使 用 图 片 时 如 何 保证 尽 可 能 精简 。 

然而 ， 我 们 也 认识 到 媒体 查询 只 能 为 我 们 提供 自 适应 设计 效果 ， 不 能 真正 实现 响应 式 设 
计 。 对 于 响应 式 设计 来 说 ， 媒 体 查 询 是 必需 的 ， 而 能 让 我 们 的 设计 在 媒体 查询 设置 的 断 
点 之 间 灵 动 显示 的 流动 布局 技术 同样 必需 。 创 建 基 本 的 流动 布局 ， 保 证 页 面 在 媒体 查询 
断 点 之 间 的 显示 效果 平滑 流畅 ， 是 我 们 下 一 章 将 要 讲述 的 内 容 。 
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拥抱 流 式 布 局 














20 世纪 90 年 代 末 ,我 刚 学 习 做 网 页 的 时 候 ， 页面 布局 结构 都 是 基于 表格 的 。 通常 ,屏幕 am 


























上 显示 的 各 部 分 元 素 都 是 百分比 宽度 。 例 如 ， 左 侧 的 导航 栏 可 能 占据 20% 的 屏幕 宽度 ， 
主 内 容 区 占据 80%。 那 时 的 浏览 需 视 口 还 没有 像 今天 这 样 天 差 地 别 ， 所 以 表格 式 布局 在 
有 限 范 围 的 视 口中 表现 良好 且 能 自由 伸缩 。 没 人 太 在 意 某 些 句 子 在 不 同 大 小 的 屏幕 上 效 
果 不 一 样 。 不 过 ， 随 着 CSS 的 兴起 ， 网 页 设计 也 更 加 接近 印刷 设计 ， 很 多 人 ( 包括 我 ) 
开始 使 用 固定 的 基于 像素 的 布局 ， 而 基于 百分比 的 布局 逐年 减少 。 


所 有 伟大 的 设计 和 思想 ， 都 会 卷土重来 。 迷 你 车 、 溪 发 (我 喜欢 ) 以 及 喇叭 牛仔 裤 都 在 
多 年 沉寂 后 卷土重来 。 现 在 ， 轮 到 百分比 布局 方法 上 演 王者 归来 了 。 
本 章 内 容 

口 理解 为 什么 响应 式 设计 需要 百分比 布局 

O 将 元 素 的 固定 像素 宽度 转换 为 百分比 宽度 

O 将 文字 的 固定 像素 大 小 转换 为 等 量 的 相对 尺寸 

口 理解 如 何 找到 任意 元 素 的 上 下 文 

口 学 习 如 何 使 图 片 平滑 缩放 

口 学 习 如 何 为 不 同 的 大 小 的 屏幕 提供 不 同 的 图 片 

口 学 习 如 何 让 媒体 查询 与 弹性 图 片 及 流 式 布局 协同 工作 

口 使 用 CSS 网 格 系统 从 头 创建 一 个 响应 式 布局 















































固定 布局 经 不 起 未 来 考验 


我 前 面 说 过 ， 在 “表格 布局 ”的 时 代 落 幕 之 后 ， 很 少 有 需要 使 用 百分比 布局 。 一 般 情 况 
F, 我 接 到 的 要 求 都 是 让 HTML 和 CSS 可 以 完美 匹配 950-1000 像素 显示 屏 。 如 果 布 局 使 
用 了 百分比 宽度 ( 如 90% )， 耳 边 很 快 就 能 听 到 抱怨 :“ 我 的 显示 器 上 效果 不 太一 样 。 
定 像素 尺寸 的 网 页 是 匹配 固定 像素 尺寸 显示 器 的 最 简单 办 法 。 


即使 在 最 近 ， 当 我 们 针对 某 个 特定 的 流行 设备 如 iPad 或 者 iPhone， 使 用 媒体 查询 来 制作 





























图 灵 社 区 会 员 lemoggy(lemoggy@foxmail.com) 专 享 尊重 版 权 


44 


$33 ”拥抱 流 式 布 局 





3.2 


3.3 





修正 版 的 布局 时 (类似 第 2 音 的 例子 ), 仍然 是 基于 已 知 的 视 口 宽度 使 用 固定 像素 尺寸 。 
很 多 人 喜欢 这 种 方式 ， 因 为 每 次 有 新 东西 出 来 ， 只 要 用 户 要 求 修改 网 站 ， 就 可 以 借 机 收 
一 次 费 。 但 是 ， 这 种 方法 不 是 一 种 完全 兼容 未 来 的 网 页 制作 方法 。 未 来 ， 还 会 出 现 更 多 




















大 小 不 一 的 视 口 ， 我 们 需要 一 些 适 应 未 知 设备 的 方法 。 


为 什么 响应 式 设计 需要 百分比 布局 


在 认识 到 媒体 查询 威力 无 比 的 同时 ,我们 也 要 看 到 它 的 局 限 性 。 那 些 仅 使 用 媒体 查询 来 








适应 不 同 视 口 的 固定 宽度 设计 ， 只 会 从 一 组 CSS 媒体 查询 规则 突变 到 另 一 组 ， 两 者 之 间 
没有 任何 平滑 渐变 。 从 我 们 在 第 2 章 的 例子 来 看 ， 当 某 个 视 口 处 于 媒体 查询 设置 的 固定 























宽度 范围 之 外 ( 可 能 是 某 种 未 知 的 未 来 设备 及 视 口 ), 网 页 就 需要 水 平 滚动 才能 完整 议 








n^ 
Mo 


不 过 我 们 想 要 的 是 一 个 灵活 的 设计 ， 能 在 所 有 视 口中 都 完美 显示 ， 而 不 仅仅 只 针对 媒体 











查询 设 定 的 一 些 固定 视 口 。 切 入 主题 吧 ( 看 出 来 我 在 这 拌 的 包 禄 了 吗 ? 我 用 了 一 句 








Ej 
Hu 


























一 个 媒体 查询 之 间 灵 活 伸缩 修正 样式 。 
百分比 布局 和 媒体 查询 和 谐 共 处 


我 之 前 提 到 过 伊 桑 . 马 科 特 在 A List Apart 上 发 表 的 有 关 响 应 式 网 页 设计 
的 文章 ( http://www.alistapart.com/articles/responsive-web-design/ )。 其 实 
他 采用 的 技术 ( 流动 布局 、 弹 性 图 片 和 媒体 查询 ) 并 不 新 疾 ， 而 将 这 些 
理念 基于 一 套 完 整 统一 的 方法 论 进行 应 用 则 很 有 创造 性 。 对 于 很 多 网 页 
设计 工作 来 说 ， 他 的 文章 打开 了 很 多 新 的 思路 。 事 实 上 ， 这 种 网 页 设计 
的 新 方法 做 到 了 两 全 其 美 : 使 用 百分比 布局 创建 流动 的 弹性 界面 ， 同 时 
使 用 媒体 查询 来 限制 元 素 的 变动 范围 。 将 这 两 者 组 合 到 一 起 构成 了 响应 
式 设计 的 核心 ， 基 于 此 可 以 创造 出 真正 完美 的 设计 。 





将 网 页 从 固定 布局 修改 为 百分比 布局 


行 话 来 搭配 我 们 的 电影 主题 的 网 站 …… 没 看 懂 ? 好 冷 啊 , 我 去 穿 件 外 套 …… ), 我 们 需要 
将 固定 像素 布局 转换 成 灵活 的 百分比 布局 。 这 样 才能 让 页 面 元 素 根据 视 口 大 小 在 一 个 又 














在 可 预见 的 未 来 ， 你 看 到 的 和 制作 的 网 页 都 还 会 使 用 固定 尺寸 。 当 前 ， 我 们 通常 是 在 























Photoshop Fireworks 等 软件 制作 的 设计 图 中 ( 基于 像素 单位 ) 度量 元 素 的 大 小 、 外 边 距 ， 
然后 将 这 些 尺 寸 直接 写 进 CSS 代码 中 。 文 字 大 小 也 是 这 样 设置 的 。 我 们 在 图 片 编辑 软件 
中 点 击 一 下 文字 对 象 ， 查 看 其 具体 尺寸 (一般 单位 是 像素 )， 然 后 将 其 写 入 对 应 的 CSS 
































代码 。 那 我 们 如 何 将 固定 尺寸 转换 为 相对 尺寸 呢 ? 
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3.3.1 


需要 牢记 的 公式 


作为 伊 桑 . 马 科 特 的 粉丝 ， 我 对 他 的 崇拜 可 能 有 点 太 过 了 。 但 此 处 我 有 必要 再 给 他 行 一 次 
三 跤 九 郧 之 礼 。 在 丹 ， EE (Dan Cederholm ) 编写 的 《无 懈 可 击 的 Web 设计 》 一 
PF, PR- 马 科 特 为 其 撰写 了 一 章 关 于 流动 布局 的 内 容 。 在 书 中 ， 他 提供 了 一 个 简易 
可 行 的 公式 ， 将 固定 像素 宽度 转换 对 应 的 百分比 宽度 : 
目标 元 素 宽度 二 上 下 文 元 素 宽 度 = 百 分 比 宽度 

看 起 来 有 点 像 方程 式 ? 不 要 害怕 ， 在 创建 响应 式 设 计 的 过 程 中 ， 这 个 公式 很 快 会 成 为 你 
的 得 力 助 手 。 不 再 歼 述 理论 ， 接 下 来 我 们 使 用 该 公式 将 And the winner isn*t.. 网 站 从 固定 
尺寸 转换 成 百分比 布局 。 


如 果 你 还 记得 ,我 们 在 第 2 章 学 习 使 用 媒体 查询 来 支持 不 同 视 口 时 ， 所 编写 的 页 面 基 本 
标签 结构 应 该 是 这 样 的 : 


«div id="wrapper"> 
<!-- the header and navigation --> 
«div idz'header'» 
«div idz'navigation'» 
«ul» 
<li><a hrefz'£'»navigationl«/a»«[li» 
<li><a hrefz'£'»navigation2«[a»«[li» 
</ul> 

</div> 

«[ di v» 
<!-- the sidebar --> 
«div idz'sidebar'» 

«p»here is the sidebar«/p» 
«[ di v» 
<!-- the content --> 
«div idz'content'» 

«p»here is the content «/ p» 
«[ di v» 
<!-- the footer --» 

«div idz'footer'» 

«p»Here is the footer«/p» 

«[ di v» 
«[ di v» 


页 面 内 容 稍 后 添加 ， 但 我 们 要 重点 关注 的 是 此 处 用 来 设置 页 面 主要 结构 模块 〈( 头 部 、 导 
航 、 侧 边栏 、 内 容 区 以 及 页 脚 ) 宽度 的 CSS。 请 注意 ,下 面 的 代码 中 我 省 去 了 很 多 样式 ， 
以 便 将 注意 力 集中 在 页 面 结构 上 : 


#wrapper { 
margin-right: auto; 
margin-left: auto; 
width: 960px; 

} 
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#header { 
margin-right: 10px; 
margin-left: 10px; 
width: 940px; 

} 


#navigation { 
paddi ng-bottom: 25px 
margin-top: 26px; 
margin-left: -10px; 
padding-right: 10px; 
padding-left: 10px; 
width: 940px; 

} 


#navigation ul li { 
display: inline-block; 


#content { 
margin-top: 58px; 
margin-right: 10px; 


float: right; 
width: 698px; 
} 
#sidebar { 


border-right-color: #e8e8e8; 
border-right-style: solid; 
border-right-width: 2px; 
margin-top: 58px; 
padding-right: 10px; 
margin-right: 10px; 
margin-left: 10px; 





float: left; 
width: 220px; 

} 

#footer { 
float: left; 
margin-top: 20px; 
margin-right: 10px; 
margin-left: 10px; 
clear: both; 
width: 940px; 


} 

上 面 代 码 中 所 有 的 尺寸 值 都 是 像素 值 。 我 们 从 最 外 层 的 元 素 开 始 ， 使 用 “目标 元 素 宽度 : 
上 下 文 元 素 宽度 = 百分比 宽度 ”这 个 公式 将 它们 改 成 百分比 宽度 。 

当前 所 有 的 页 面 内 容 都 被 包 庄 在 一 个 ID 为 #wrapper 的 div 中 。 在 上 面 所 示 的 CSS 中 可 
见 ， 这 个 div 被 设置 为 外 边 距 自 适 应 ， 宽 度 960 像素 。 作 为 最 外 层 的 div， 我 们 该 把 它 的 
宽度 定义 为 相对 视 口 宽度 的 百 分 之 多 少 呢 ? 
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3.3.2 ”设置 百分比 元 素 的 上 下 文 


我 们 需要 一 些 “hold” 场 面 的 元 素 , 让 它们 作为 网 页 中 百分比 宽度 元 素 ( 内 容 区 、 侧 边栏 、 
页 脚 ) 的 上 下 文 。 我 们 要 为 这 些 元 素 的 宽度 设置 一 个 百分比 值 ， 而 #wr apper 元 素 的 宽 
度 应 该 是 相对 于 视 口 尺寸 而 言 的 。 现 在 我 们 从 头 来 过 ， 将 其 宽度 设置 为 96% 看 看 效果 如 
何 。#wr apper 元 素 修改 后 的 样式 如 下 : 


#wrapper { 
margin-right: auto; 
margin-left: auto; 
width: 9695 /* 控制 最 外 层 的 div */ 
} 


修改 后 的 效果 如 下 图 所 示 : 








€ BOCE 





And the winner t 


VY YYÝVVVVVVVVVVVVVVVVVVVS i 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


— 4, EVERY YEAR 
i WHEN | WATCH THE 
Redes | M AREIS 





OVERHYPED 
NONSENSE... 











AAAAAAAAAAAAAAAAAAAAAAAAAAL 








看 起 来 还 不 错 ! 96% 的 宽度 刚刚 好 ,不 过 也 可 以 选择 100% 或 者 90% 
感觉 保证 网 页 在 视 口 内 有 最 美观 的 视觉 效果 即 可 。 


TE de 我 们 先 来 看 看 头 部 。 再 复习 一 下 
公式 : 目标 元 素 宽度 :上下文 元 素 宽 度 = 百 分 比 宽 度 。#header (目标 元 素 ) KARE 
#wr apper (上 下 文 元 素 ) 中 。 因 此 , 我 们 用 #header 的 宽度 940 像素 , 来 除 以 上 下 文 元 


这 取决 于 我 们 的 
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素 (wrapper ) 的 宽度 960 像素 ,结果 是 0.979166667。 将 小 数 点 向 右 移动 两 位 转换 为 
百分比 值 ， 我 们 就 得 到 了 头 部 的 百分比 宽度 ， 即 97.9166667。 将 结果 设置 到 CSS 中 : 


*header { 
margin-right: 10px; 
margin-left: 10px; 
width: 97.9166667% /* 940 + 960 */ 
} 
#navi gation 和 #f00ter 的 宽度 也 是 基于 像素 的 ， 我 们 使 用 相同 的 方法 将 它们 转换 为 


百分比 。 


最 后 在 浏览 器 中 查看 效果 之 前 ,我 们 来 说 说 #cont ent 和 #5si debar 。 上 下 文 宽度 还 是 960 
像素 ， 4 需要 用 目标 元 素 宽 度 来 除 这 个 数字 即 可 。#Cont ent 的 宽度 是 698 像素 ， 
除 以 960 结果 是 0.727083333。 移 动 小 数 点 后 结果 是 72.7083333% 一 一 这 就 是 #c ont ent 
的 百分比 宽 ut. 侧 边 栏 的 宽度 是 220 像素 , 但 它 有 2 像素 宽 的 边框 。 我 不 想 让 右 侧 边框 
的 宽度 随 着 上 下 文 变 宽 或 是 变 窗 ， 而 是 始终 保持 在 2 像素 。 所 以 需要 将 侧 边 栏 的 宽度 减 
去 一 点 。 我 将 本 例 中 的 侧 边栏 宽度 减 去 2 像素 ， 然 后 套用 之 前 的 公式 ， 即 目标 元 素 宽度 
(218 像素 ) 除 以 上 下 文 元 素 宽度 (960 像素 )， 结 果 是 0.227083333。 移动 小 数 点 后 ， 侧 
边栏 的 百分比 宽度 是 22.7083333 勾 。 再 将 所 有 像素 宽度 修改 为 百分比 宽度 ， 最 终 的 CSS 
代码 如 下 所 示 : 


#wrapper { 
margin-right: auto; 
margin-left: auto; 
width: 96% /* 最 外 层 DIV */ 
} 





















































#header { 

margin-right: 10px; 

margin-left: 10px; 

width: 97.9166667*6; /* 940 + 960 */ 
} 


#navigation { 
paddi ng-bottom: 25px 
margin-top: 26px; 
margin-left: -10px; 
padding-right: 10px; 
padding-left: 10px; 
width: 72.7083333% |* 698 + 960 */ 


} 

#navigation ul li { 
display: inline-block; 

} 

#content { 


margin-top: 58px; 
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margin-right: 10px; 


float: right; 

width: 72.7083333% /* 698 + 960 */ 
} 
#sidebar { 


border-right-color: £e8e8e8; 
border-right-style: solid; 
border-right-width: 2px; 
margin-top: 58px; 
margin-right: 10px; 
margin-left: 10px; 





float: left; 

width: 22.7083333% |* 218 + 960 */ 
} 
#footer { 

float: left; 


margin-top: 20px; 

margin-right: 10px; 

margin-left: 10px; 

clear: both; 

width: 97.9166667*6; /* 940 + 960 */ 
) 


下 图 展示 了 当前 页 面 在 视 口 宽度 约 为 1000 像素 的 Firefox W V3 as P BUAICR : 
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heroes lose out. Not very Hollywood is it? 


We're here to put things right 
Thee should have won » 
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0 错 。 接 下 来 我 们 继续 使 用 “目标 元 素 宽度 -上下文 元 素 宽度 = 百分比 宽度 ” 
个 公式 ， 将 页 面 各 处 10 像素 的 内 边 距 、 外 边 距 也 替换 成 等 价 的 百分比 值 。 所 有 这 些 间 
En 960 像素 的 上 下 文 ， 所 以 替换 成 对 应 的 百分比 值 就 是 1.041666796 ( 10 = 960 )。 





这 些 数 字 能 四 售 五 入 吗 ? 


一 些 响应 式 设 计 技 术 的 批评 者 ( 如 这 篇 文章 : http://tripleodeon.com/2010/ 
10/not-a-mobile-web-merely-a-320px-wide-one/ ) 认为 在 样式 表 中 输入 诸 
POTAS ET E E T a ATE 
四 爹 五 入 ? 但 支持 者 们 认为 ， 这 样 做 可 以 提供 更 加 精确 的 结果 。 为 浏览 器 
提供 更 加 精确 的 结果 可 以 使 其 显示 效果 更 加 精准 。 顺 便 说 一 下 ， 学 过 数学 
的 人 都 应 该 知道 黄金 分 割 座 (http://en.wikipedia.org/wiki/Golden_ratio ) 3 

金 分 割 率 是 一 个 很 早 就 被 发 现 且 广 泛 应 用 于 各 学 科 的 数学 比例 ， 其 比值 大 
约 为 1:1.61803398874989 ( 如 果 你 想 知道 保留 10000 位 小 数 的 黄金 分 割 数 ， 
请 访问 这 里 : http//www.maths.surrey.ac.uk/hosted-sites/R.Knott/ Fibonacci/ 
phil0000dps.txt )。 怎 么 看 它 都 不 是 一 个 简洁 的 数字 ， 但 是 它 非常 重要 。 黄 

金 分 割 率 的 测量 都 能 做 到 如 此 精确 ， 那 我 相信 网 页 设计 同样 做 得 到 。 








pe 的 视 口 中 ， 页 面 元 素 表 现 良好 。 但 是 导航 区 域 不 太 理 想 。 如 果 将 视 口 尺寸 缩 
小 一 点 ， 只 要 一 丁点 ， 导 航 链接 就 会 变 成 两 行 : 
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此 外 ， 如 果 将 视 口 放大 ， 导 航 链接 之 间 的 间距 并 不 会 相应 地 增加 。 我 们 来 看 看 与 导航 关 
联 的 CSS 代码 并 试 着 找 出 问题 的 原因 : 


gnavigation ( 
padding-bottom 25px; 
margin-top: 26px; 
margin-left: -1.0416667*5 /* 10 960 */ 
padding-right: 1.0416667*; /* 10 + 960 */ 
padding-left: 1.041666795 /* 10 960 */ 
width: 97.9166667*5 /* 940 + 960 */ 
background-repeat: repeat-x; 
background-image: url(../i mg/atwi NavBg. png) 
border-bottom-color: sbfbfbf; 
border-bottom- style: double; border-bottom-wi dth: 4px 





} 

#navigation ul li { 
display: inline-block; 

} 

#navigation ul li a ( 
height: 42px; 


line-height: 42px; 

margin-right: 25px; 

text-decoration: none; 

text-transform: uppercase 

font-family: Arial, "Lucida Grande", Verdana, sans-se 
font-size: 27px; 

color: black; 


} 


一 眼看 上 去 ， 就 发 现 好 像 上 面 的 第 三 个 样式 规则 #navigation ul li a, WA 25px 这 
样 的 基于 像素 单位 的 外 边 距 。 让 我 们 用 久 经 考验 的 公式 来 修正 这 个 问题 。 导 航 区 域 的 宽 
度 是 940 像素 ， 所 以 换算 结果 是 2.6595745%。 对 该 样式 的 修改 如 下 : 


#navigation ul li a ( 
height: 42px; 
line-height: 42px; 
margin-right: 2.6595745% /* 25 + 940 */ 
text-decoration: none; 
text-transform: uppercase 
font-family: Arial, "Lucida Grande", Verdana, sans-serif 
font-size: 27px; 
color: black; 


} 
够 简单 吧 ! 我 们 到 浏览 器 中 看 看 是 否 万 事 如 意 …… 
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4 | |) hle1//Volumes/MacBr HDO/Users/benfrain/Documents/Storage/articies/packt/responsiveCS! - ^» @ 3$- Qa A 加 -| 
1O And the winner isn't [8T 
AND THE WINNER IS 
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that films like King Kong, Moulin Rouge and 
Munich get the statue whilst the real cinematic 
heroes lose out. Not very Hollywood is it? 


We're here to put things right. 
these should have won » 





S AB. THAT'S AF. 


. 4AAAAAAAAAAAAAAAAAAAAAAAAAA 


1037x1033 














鹃 ， 等 等 ， 这 不 是 我 们 想 要 的 效果 。 导 航 链接 没 再 折 成 两 行 ， 但 很 明显 导航 链接 之 间 的 
间距 不 对 。 导 航 链接 看 上 去 像 一 个 字典 里 查 不 到 的 长 单词 …… 


3.3.3 ”必须 时 刻 牢 记 上 下 文 


再 想 想 我 们 的 公式 〈 目标 元 素 宽度 -上 下 文 元 素 宽度 = 百分比 宽度 ), 你 就 会 知道 前 述 问题 
的 症结 所 在 一 一 上 下 文 元 素 。 相 关 的 标签 结构 如 下 : 


«div idz'navigation'» 
«ul» 





<li><a hrefz'£'»Why?«[a»«[li» 
<li><a href ="#">Synopsis</a></li> 
<li><a href=" #">Stills/Photos</a></li> 
<li><a hrefz'£'»Videos/clips«[a»«[li» 
<li><a hrefz'£'»Quotes«/ a»«/li» 
<li><a href=" #">Quiz</a></li> 
«lul» 
«I di v» 
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可 以 看 到 <a href=" 4' » BEHEBEELZETE AR AIMA i > 标签 中 。 它 们 才 是 我 们 要 找 的 外 
边 距 的 上 下 文 元 素 。 看 看 <| i > 标签 对 应 的 CSS 代码 ， 会 发 现 没 有 为 其 设置 宽度 : 
#navigation ul li { display: inline-block; } 

这 种 情况 很 常见 ， 不 过 我 们 有 很 多 方法 解决 这 个 问题 。 我 们 可 以 给 <1 i > 标签 设置 一 个 明 
确 的 宽度 值 ， 这 个 值 必须 得 是 一 个 固定 像素 宽度 或 者 是 一 个 相对 于 其 包 于 元 素 
(#navi gation div ) 的 百分比 值 ， 但 这 两 种 值 都 无 法 保证 <| i > 中 的 文字 灵活 可 变 。 

此 外 我 们 可 以 修改 <|i > 现在 的 CSS 代码 ,将 inline-block 改 为 inline: 


snavigation ul li ( 
display: inline; 








使 用 di splay: inline; (这 样 可 以 阻止 <|i > 元 素 泻 染 为 块 级 元 素 ) 还 可 以 使 导航 在 不 
支持 inline-block 的 老 版 本 Internet Explorer ( 版 本 6 和 7 ) 中 水 平 显示 。 不 过 ， 我 是 
inline-block 的 粉丝 ,因为 它 允 许 我 们 在 现代 浏览 器 中 有 效 的 控制 外 边 距 和 内 边 距 ， 

所 以 我 会 让 <l i > 标签 继续 保持 inline- blocks 状态 (一 会 可 以 给 IE6 和 IE7 追加 一 个 
履 写 样式 )， 然 后 将 ( 没有 明确 的 上 下 文 的 ) <a> 标 签 上 的 百分比 外 间距 挪 到 <| i > 上来。 
修改 后 的 样式 如 下 所 示 : 


#navigation ul li { 

display: inline-block; 

margin-right: 2.6595745*5 |* 25 s 940 */ 
} 





#navigation ul li a ( 
height: 42px; 
line-height: 42px; 
text-decoration: none; 
text-transform: uppercase 
font-family: Arial, "Lucida Grande", Verdana, sans-serif 
font-size: 27px; 
color: black; 





} 

下 图 展示 了 在 视 口 宽 度 1200 像素 的 浏览 中 的 显示 效果 。 

导航 区 域 的 修改 现在 告 一 段落 ， 但 是 导航 链接 在 视 口 变 小 时 仍然 会 折 成 两 行 ， 只 有 到 了 
视 口 小 于 768 像素 时 ,第 2 章 编写 的 媒体 查询 才能 覆 写 当前 的 导航 样式 。 在 着 手 修 正 导 
航 部 分 的 问题 之 前 ,我 准备 先 将 文字 大 小 从 像素 尺寸 修改 为 相对 单位 em。 完成 这 个 工作 
之 后 ， 我 们 就 会 注意 到 另外 一 个 被 忽略 的 问题 ， 即 让 图 片 随 着 页 面 的 变化 缩放 。 
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And the winner isn't. 


| WENN YAN YN YN YN V. 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


- 4, EVERY YEAR 


WHEN | WATCH THE OSCARS I'M 
ANNOYED... 


that films like King Kong, Moulin Rouge and Munich get the 
statue whilst the real cinematic heroes lose out. Not very 
Hollywood is it? 


We're here to put things right. 











AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 





3.4 用 em 替换 px 


过 去 的 几 年 里 ， 网 页 设计 师 使 用 em 替代 px 主要 是 为 了 文字 缩放 。 因 为 老 版 本 的 Internet 
Explorer 无 法 缩放 像素 单位 的 文字 。 不 过 现代 浏览 器 很 久 以 前 就 支持 缩放 以 像素 为 单位 的 
文字 了 。 那 用 em 替换 px 还 有 什么 必要 性 或 优越 性 呢 ? 有 两 点 显而易见 的 理由 : 一 是 那 
些 使 用 Internet Explorer 6 的 用 户 也 将 能 够 缩放 文字 ， 二 是 这 样 做 可 以 使 我 们 设计 师 和 开 
发 者 的 生活 更 简单 。em 的 实际 大 小 是 相对 于 其 上 下 文 的 字体 大 小 而 言 的 。 如 果 我 们 给 
<body> 标 签 设置 文字 大 小 为 100%， 给 其 他 文字 都 使 用 相对 单位 em, 那 这 些 文字 都 会 受 
body 上 的 初始 声明 的 影响 。 这 样 做 的 好 处 就 是 ， 如 果 在 完成 了 所 有 文字 排版 后 ， 客 户 又 
提出 将 页 面 文字 统一 放大 一 点 , 我 们 就 可 以 只 修改 body 的 文字 大 小 , 其 他 所 有 文字 也 会 
相应 变 大 。 

同样 ,“ 目 标 元 素 尺寸 + 上下文 元 素 尺寸 = 百分比 尺寸 ”这 个 公式 也 适用 于 将 文字 的 像素 单 
位 转换 为 相对 单位 。 值 得 注意 的 是 ， 现 代 浏 览 器 的 默认 文字 大 小 都 是 16 像素 ( 显 式 声明 
的 除外 )。 因 此 一 开始 给 body 标签 应 用 下 列 任何 一 条 规则 所 产生 的 效果 都 一 样 : 
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font-size: 100%; 
font-size: 16px; 
font-size: lem 


下 面 举 一 个 例子 。 示 例 网 站 的 样式 表 中 ， 第 一 段 以 像素 为 单位 的 文字 就 是 页 面 左 上 角 的 
网 站 标题 : AND THE WINNER ISN'T... 


# 0g0 { 
display: block; 
padding-top: 75px; 
color: #0d0c0c; 
text-transform: uppercase 
font-family: Arial, "Lucida Grande", Verdana, sans-serif 
font-size: 48px; 


} 








#logo span { color: #dfdada; } 


因为 48 = 16 =3， 所 以 我 们 将 样式 修改 如 下 : 


#logo { 
display: block; 
padding-top: 75px; 
color: #0d0c0c; 
text-transform: uppercase 
font-family: Arial, "Lucida Grande", Verdana, sans-serif 
font-size: 3em; /* 48 + 16 = 3*/ 
} 


这 个 逻辑 在 整个 网 站 中 通用 。 如 果 发 现 哪 出 了 毛病 ， 那 应 该 是 目标 元 素 的 上 下 文 发 生 了 
变化 。 以 页 面 中 的 标签 为 例 : 


<hl>Every year <span>when | watch the Oscars I'm annoyed...</span></h1> 


修改 后 的 相对 单位 样式 如 下 : 


#content hl ( 
font-family: Arial, Helvetica, Verdana, sans-serif 
text-transform uppercase 
font-size: 4,3125em; ) /* 69 + 16 */ 














$content hl span { 
display: block; 
line-height: 1.052631579em /* 40 + 38 */ 
color: #7574714; 
font-size: .550724638em; /* 38 + 69 */ 
} 


可 以 看 到 <s pan> 元 素 的 文字 大 小 (38 像素 ) 是 相对 于 其 父 元 素 的 文字 大 小 〈69 像素 ) 
而 言 的 。 而 它 的 行 高 (40 像素 ) 则 是 相对 于 其 本 身 的 文字 大 小 (38 像素 ) 而 言 。 


现在 ,我 们 的 页 面 结构 可 以 自动 缩放 , 文字 大 小 也 已 从 像素 单位 转换 成 相对 单位 。 但 是 ， 
我 们 还 必须 解决 图 片 大 小 随 视 口 缩放 的 问题 。 那 我 们 接 下 来 看 看 这 个 问题 。 
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em 究竟 是 什么 ? 
em 是 书面 形式 的 大 写字 母 “M” 的 简称 ， 发 音 和 M 相同 。 以 前 ,，“M” 
常 被 用 来 测定 某 种 字体 的 大 小 ， 因 为 它 是 英文 字母 中 最 大 ( 最 宽 ) 的 字 
Ak. wA, em 作为 一 个 测量 单位 ， 指 的 是 特定 字母 的 宽度 和 高 度 相对 
于 特定 字体 磅 值 的 比例 。 
3.5 ”弹性 图 片 
在 现代 浏览 需 (包括 E 7+) 中 要 实现 图 片 随 着 流动 布局 相应 缩放 非常 简单 。 只 需 在 CSS 
中 作 如 下 声明 : 
img { 
max-width: 100% 
} 
这 样 就 可 以 使 图 片 自 动 缩放 到 与 其 容器 100% 匹 配 。 更 进一步 , 可 以 将 同样 的 样式 应 用 到 
其 他 多 媒体 标签 上 。 如 : 
img, object,video,embed { 
max-width: 100% 
} 
这 些 多 媒体 元 素 都 可 以 自动 缩放 了 。 但 是 ,对 于 采用 的 <i fra me > 显示 视频 的 网 站 ( 比如 
YouTube )， 这 个 技术 还 不 行 ， 我 们 会 在 第 4 章 解 决 这 个 问题 。 眼 下 ， 还 是 专注 于 图 片 的 
缩放 问题 吧 ， 因 为 不 论 何 种 多 媒体 元 素 ， 原 理 都 是 相通 的 。 
使 用 这 种 方法 有 几 个 需要 其 酌 的 问题 。 第 一 ， 要 提前 准备 一 张 足够 大 的 图 片 ， 以 备 大 视 
口 使 用 。 但 这 也 就 引出 了 第 二 个 ， 同 时 也 是 非常 重要 的 问题 ， 即 无 论 视 口 多 大 ， 什 么 设 
备 ， 都 得 下 载 超大 图 片 。 可 能 对 某 些 设备 来 说 ， 图 片 大 小 只 要 原始 图 片 的 25% 就 好 了 。 
另外 ,在 某 些 情况 下 ， 你 还 不 得 不 因此 而 考虑 带宽 限制 。 我 们 呆 会 儿 再 说 第 二 个 问题 ， 
先 把 图 片 缩放 问题 说 完 。 
3.5.1 让 图 片 随 视 口 缩放 





























示例 网 站 的 侧 边栏 有 一 组 电影 海报 ， 其 中 两 部 是 好 电影 ， 两 部 是 烂 电影 〈 不 在 此 处 讨论 
这 个 话题 )。 对 应 的 标签 结构 如 下 : 


<!-- the sidebar --> 
«div idz'sidebar'» 
«div classz'sideBlock unSung'» 
«h4»Unsung heroes... </h4> 
«a href=" #"><i mg srcz"i mg/ mi dni ghtRun.j pg" alt="Midni ght Run" wi dthz"99"hei ght- 
"135" /></a> 
«a href="#"><img srcz"img/ wyattEarp.jpg' altz"Wyatt Earp" widthz"'99" height= 
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"135" /></a> 
«[ di v» 
«div classz'sideBlock overHyped'» 
«h4»0verhyped nonsense... </h4> 
<a href="#"><img src="i mg/ muli nRouge.j pg" altz'Moulin Rouge" width="99" height= 


"135" /></a> 
«a href="#"><img srcz'img/ ki ngKong.jpg' altz'King Kong" width="99" height= 
"135" /></a> 
«[ di v» 
«[ di v» 





尽管 我 在 CSS 文件 中 给 i mg 元 素 追 加 了 max- wi dth: 10090988], 但 是 没 看 到 什么 变化 ， 








图 片 没 有 按 我 预想 的 方式 随 着 视 口 变化 而 变化 ; gm 
vvv VYVVVEVVVTVVVTVVYVTVY TY V 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS  VIDEOS/CLIPS QUOTES QUIZ 


UNSUNG HEROES... 


{ EVERY YEAR 


WHEN I WATCH THE OSCARS I'M 
ANNOYED... 

that films like King Kong, Moulin Rouge and Munich get the statue 
whilst the real cinematic heroes lose out. Not very Hollywood is it? 


We're here to put things right. 
these sboukd have won.» 





S A FACT. DEAL WITH IT 


AÀAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAÁAA 


4315x1021 











原因 是 我 在 标签 中 指定 了 图 片 的 宽度 和 高 度 : 
«img srcz'img/ wyattEarp.jpg" alt="Wyatt Earp" width="99" heightz"135" /> 
又 犯 了 一 个 低级 错误 ! 修改 对 应 的 图 片 标签 ， 删 除 宽度 和 高 度 属性 : 


«img srcz'img/ wyattEarp.jpg' altz'Wyatt Earp" /> 


刷新 浏览 器 看 看 修改 的 效果 : 
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And the winner isnt — "— 
Cy 
AND THE WINNER IS 
WHY? SYNOPSIS STILLS/PHOTOS  VIDEOS/CLIPS QUOTES QUIZ 
UNSUNG HEROES... 
WHEN | WATCH THE OSCARS I'M 
ANNOYED... 
that films like King Kong, Moulin Rouge and Munich get the statue 
whilst the real cinematic heroes lose out. Not very Hollywood is it? 
We're here to put things right 
these should have won e 
k 1315x1019 
修改 确实 起 效 了 ! 但 却 引 入 了 另外 一 个 问题 。 ANEA ERARIK WER 100%, 
所 以 每 张 图 片 都 填 满 了 侧 边 栏 。 同 样 ， 解 决 这 个 问题 的 方法 有 很 多 …… 
3.5.2 为 特定 图 片 指定 特定 规则 


可 以 像 下 面 代码 所 示 的 那样 给 每 个 图 片 追 加 一 个 额外 的 class: 
«i mg class="sidel mage" srcz'img/ wyattEarp.jpg' alt="Wyatt Earp" /> 
然后 ， 为 其 宽度 设置 一 个 特定 的 规则 。 另 外 ， 我 们 还 可 以 保留 图 片 标 签 不 变 ， 利 用 CSS 
规则 的 针对 性 ， 用 一 个 更 具体 的 规则 覆 写 侧 边 栏 图 片 已 有 的 max-width 样式 : 
img { 
max-width: 10095 
} 
.sideBlock img { 
max-width: 45%; 
} 


下 图 展示 了 侧 边 栏 当前 的 显示 效果 : 
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3.5.3 





4r : vel a3 * n- 
x ] 


And the winar iun 


CVVVVVVVYNN NN NN NN NN | 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS  VIDEOS/CLIPS QUOTES QUIZ 


UNSUNG HEROES... 


EVERY YEAR 


WHEN | WATCH THE OSCARS I'M 
ANNOYED... 


that films like K Moulin Rouge and Munich get the statue whilst 





ose out. Not very Hollywood is it? 


OVERHYPED NONSENSE... 











这 种 利用 CSS 规则 针对 性 的 方法 ， 也 可 以 用 来 控制 其 他 图 片 或 多 媒体 元 素 的 宽度 。 第 5 
章 会 介绍 CSS3 选择 器 的 强大 威力 ， 它 能 让 我 们 不 追加 任何 多 余 标 签 ， 或 是 不 引入 任何 
JavaScript 框架 (如 jQuery )， 直 接 指 向 页 面 任意 元 素 ， 来 完成 我 们 的 茜 活 累 活 。 


我 给 侧 边栏 图 片 设 置 的 宽度 是 45%， 因 为 图 片 之 间 需 要 一 点 间距 ， 所 以 两 张 图 片 宽 度 加 
起 来 是 90% ， 给 我 留 出 了 一 点 余地 (10% )。 


现在 侧 边栏 图 片 终 于 完美 显示 了 ， 我 准备 将 奥斯卡 雕像 图 片 的 标签 中 的 宽度 和 高 度 也 删 
除 掉 。 但 是 ， 除 非 我 为 其 设置 一 个 百分比 宽度 ， 否 则 它 还 是 不 会 自动 缩放 ; 所 以 我 再 次 
使 用 我 们 值得 信赖 的 公式 来 为 其 设置 一 个 百分比 宽度 。 
.0scarMain ( 

float: left; 

margin-top: -28px; 

width: 28.9398281% /* 202 + 698 */ 
} 


























ARRA RENA 


现在 图 片 可 以 随 着 视 口 的 伸缩 而 缩放 了 。 但 是 如 果 将 视 口 拉 大 , 直到 图 片 拉 伸 至 超出 其 原 
始 尺寸 , 那 问 题 就 麻烦 了 。 看 看 下 图 所 示 的 1900 像素 宽 的 视 口中 奥斯卡 图 片 的 显示 效果 : 
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AND THE WINNER IS 


WHY? | SYNOPSIS  STILLS/PHOTOS — VIDEOS/CLIPS QUOTES QUIZ 


UNSUNG HEROES. 


EVERY YEAR 
ME ! MALA OSCARS I'M SNAKES 


Munich get the statue 














oscar.png 图 片 的 实际 宽度 是 202 像素 。 1900 像素 宽 的 视 口 中 , 图 片 也 被 拉 大 了 ， 
其 显示 宽度 超过 了 300 像素 。 我 们 可 以 通过 追加 另 一 个 特定 样式 来 为 图 片 设 置 阔 值 : 


.0 


} 





scarMain { 

float: left; 

margin-top: -28px; 

width: 28.939828195 /* 698 + 202 */ 
max-width: 202px; 











这 样 就 可 以 保证 oscar.png 按照 通用 的 图 片 样式 自由 缩放 ， 但 又 绝 不 会 超出 max-width 








性 设置 的 最 大 上 限 。 下 图 展示 了 给 图 片 设置 上 限 之 后 的 页 面 效 果 : 





WERE NT I | 
AND THE WINNER IS 


WHY? SYNOPSIS  STILLS/PHOTOS — VIDEOS/CLIPS QUOTES QUIZ 








UNSUNG HEROES.. 


EVERY YEAR 
WHEN I WATCH TE GSSRS. IM ANNON ED 


King Kong, Mouli e stat 





MOULIN AOGE 








AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA, 
A men 
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3.5.4 超级 全 能 的 max-width 属性 


另 一 种 限制 页 面 无 限制 扩张 的 方法 是 给 最 外 层 的 #wrapper div 设置 max- wi dth 属性 ， 
如 下 所 示 : 


#wrapper { 
margin-right: auto; 
margin-left: auto; 
width: 96% /* Holding outermost DIV */ 
max-width: 1414px; 
} 


这 样 意味 着 页 面 会 缩放 至 视 口 宽度 的 96% ， 但 绝 不 会 超过 1414 像素 宽 (设置 为 1414 像 
素 ， 是 因为 在 这 个 宽度 下 大 多 数 浏览 融 恰 好 能 藤 切 出 完整 的 角 唐 ， 而 不 会 留 个 半边 )。 下 
图 展示 了 视 口 宽度 1900 像素 下 的 页 面 效 果 : 
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显然 这 些 方 法 仅 是 备用 选项 。 但 它 证 明了 流动 布局 的 灵活 性 ， 也 说 明了 如 何 通过 儿 个 特 
定 声明 来 控制 文档 流 。 





3.6 为 不 同 的 屏幕 尺寸 提供 不 同 的 图 片 


现在 我 们 可 以 让 图 片 完美 缩放 ， 而 且 也 知道 了 如 何 限制 特定 图 片 的 显示 尺寸 。 但 在 这 章 
的 前 面 我 们 曾 指出 图 片 缩放 存在 一 定 的 问题 。 图 片 尺 十 必须 比 其 显示 斥 十 更 大 以 保证 泻 
染 效 果 ， 和 否则 的 话 图 片 可 能 看 起 来 很 糟糕 。 基 于 这 个 原因 ， 图 片 文件 的 体积 就 永远 比 实 
际 显 示 所 需 的 大 。 
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很 多 人 都 在 研究 这 个 问题 ， 尝 试 为 较 小 的 屏幕 尺寸 提供 较 小 的 图 片 。 第 一 个 著名 的 例子 
是 Filament Group 的 “响应 式 图 片 ”( http://filamentgroup.com/lab/responsive_images_experi_ 
menting_with_context_aware_image_sizing/ )。 不 过 最 近 ， 我 已 经 转 而 使 用 Matt Wilcox 的 
“ 自 适 应 图 片 ”( http://adaptive-images.com ) Y o Filament Group 的 解决 方案 需要 对 图 片 标 
签 做 一 定 修改 。Matt Wilcox 的 解决 方案 则 不 需要 ， 而 且 他 的 方案 会 根据 标签 中 已 经 设 定 
的 全 尺 二 图片 自动 创建 各 种 太 才 的 图 片 。 这 种 解决 方案 允许 基于 一 组 屏幕 太 寸 断 点 ， 根 
据 用 户 需要 为 其 提供 不 同 的 图 片 。 接 下 来 我 们 就 看 一 看 如 何 利 用 该 技术 实现 图 片 自 适应 。 

















设置 自 适 应 图 片 


be 


实现 Adaptive Images 解决 方案 需要 Apache 2, PHP 5.x 和 GD 库 ， 也 就 是 说 需要 Web 服 
务 器 端 编程 。 首 先 ， 在 其 网 站 上 下 载 .zip 文件 开始 配置 : 

















Features = Requirements 


un-necessary bandwidth and money 


Examples in action 
































解压 文件 ,然后 将 其 中 的 adaptive-images.php fH. htaccess 文件 拷贝 到 网 站 的 根 目 
录 。 如 果 你 网 站 的 根 目录 下 已 经 有 一 个 , htaccess 文件 了 ,不 要 履 盖 它 。 人 参考 下 载 包 中 
的 instructions.,htm 文件 看 看 怎么 做 合适 。 
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接着 在 网 站 根 目录 下 创建 一 个 名 为 ai-cache 的 文件 夹 。 





me o radu 
- LLLI * O bak page layout] homi o mancus o ecrers 


M mE 4v «IfModule mod rewrite.c» 
"iet Options «FollowSymlinks 
È 927-0)-01. 909 RewriteEngine On 
È "9-0-02599 


& 7607-03-03 peg Ø Adaptive-Images ----------------------------- 一 ---- 一 -------------------------------------------- 一 
* "07-03-04 pe 
È 97-03-05. 579 4 Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows: 
= 07-0)-04.po9 # RewriteCond «(REQUEST URI) !ignore-this-directory 
* 97-0-07. pog # RewriteCond «(REQUEST URI) !and-ignore-this-directory-too 
* 097-0-0 59 
* 7007-03-08 peg RewriteCond «(REQUEST URI) !assets 
È "0703-1059 
* P607-03-11 peg 4 Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories 
* 1602-03-1209 # to adaptive-images.php so we can select appropriately sized versions 
dins RewriteRule X.(?:jpe?g|gif|png)$ adaptive-images.php 
v i cote 
M 4 END Adaptive-Images ------------------------------------------------------------------------------- 
Sr «/IfModule» 


> G apte images 132 





» manc 
lim 
D$. Store 
ee ora 
brerg sice srg 








+ 0^ 0 o- P 9 Qe hOn: A 





用 你 最 喜欢 的 FTP 客户 端 软件 设置 该 文件 夹 的 权限 为 177 。 





ai-cache Info 


immi ai-cache 


w General: 
Kind: Folder 
Size: „~ ( Calculate | 
Where: /httpdocs/andthewinnerisnt/ch3 / 
code 
Created: Fri, 7 Oct 2011(40) 16:57 
Modified: Fri, 7 Oct 2011(40) 16:57 





Y Owner and Group: 
Owner: N/A 
Group: N/A 


Apply to enclosed items.. Apply 





V Permissions: 
User: Mw Read Mv Write 区 Execute 
Group Mw Read Mw Write M Execute 
World: M Read [ed Write [ed Execute 


Octal: 777 rwxrwxrwx 





| Apply to enclosed items... | | Apply | 














然后 把 如 下 JavaScript 代码 复制 到 每 个 需要 自 适应 图 片 的 网 页 的 头 部 : 


<scri pt>document. cookie='resolution='+Math. max(screen. wi dth, screen. height) *'; 
path=/';/script> 
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如 果 你 没有 使 用 HTML5 ( 在 下 一 章 会 改 用 HTML5 ), 想 让 页 面 通过 标准 验证 ， 则 需要 追 
加 type 属性。 所 以 script 标签 应 如 下 所 示 : 
«script typez'text/javascript'»document.cookiez'resolutionz' +Math,maxscreen, width 
screen.height) *&' ; pathz/'; </script> 
切记 这 段 JavaScript 代码 要 放 在 页 面 头 部 〈 最 好 作为 第 一 个 脚本 )， 因 为 它 需 要 在 页 面 加 
载 完 成 之 前 ， 而 且 要 在 发 出 图 片 请 求 之 前 运行 。 下 面 是 我 们 的 示例 网 站 头 部 加 入 该 脚本 
后 的 结 
<! DOCTYPE html PUBLIC "-//W3C//] DTD XHTML 1.0 Transitional// EN" 
"http://www. w3.org/ TR/ xhtm 1/ DTD/ xhtml 1-transitional.dtd"» 
«html xmlnsz'http:// www. w3.0rg/ 1999/ xhtml" » 
«head» 
«meta http-equivz"Content- Type" contentz'text/html; charset=UTF-8" /> 
«meta namez'viewport" contentz'widthzdevice-width,initial-scalez1.0" /> 
«title»And the winner isn't.«/title» 
«script typez'text/javascript"»document.cookiez'resolutionz' *Math. 
max(screen,wi dth, screen. height) *' ; path=/'; </script> 
«link hrefz'css[main.css" rel -'styl esheet" type="text/css" /> 
</head> 

把 背景 图 片 放 在 其 他 地 方 





过 去 , 我 通常 将 所 有 图 片 都 放 在 一 个 名 如 images 或 img 的 文件 夹 中 , 不 论 是 用 做 CSS E 
景 的 图 片 ， 还 是 通过 标签 插入 的 图 片 。 但 是 在 使 用 自 适应 图 片 方案 时 ， 建 议 将 那些 用 于 
CSS 的 背景 图 片 (或 者 那些 你 不 想 被 缩放 的 图 片 ) 放 在 男 一 个 目录 。 自 适应 图 片 方案 默认 
为 此 创建 的 目录 是 as set s 。 如 果 你 不 想 缩放 某 张 图 片 ， 把 它 丢 进 这 个 文件 夹 即 可 。 如 果 
你 想 将 这 类 图 片 存在 其 他 ( 或 更 多 ) 文件 夹 中 ， 则 需要 像 下 面 这 样 修改 , htaccess 文件 。 


<l f Module mod rewrite.c» 
Options +FollowSymlinks 
RewriteEngine On 
A UO itl VO) Mma Oe eS 



































Nn 











RewriteCond %{REQUEST_URI} !assets 
RewriteCond %{REQUEST_URI} !bkg 


# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above 
directories 
# to adaptive-images.php so we can select appropriately sized versions 
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-i mages. php 
* END Adaptive-Images -«-«««««sssee n I I A Ice 
</ | f Module» 


上 面 的 代码 设 定 了 存在 assets 或 bkg 文件 夹 中 的 图 片 不 会 被 缩放 。 反 之 ， 如 果 你 想 显 
式 声明 只 人 允许 某 个 特定 文件 夹 中 的 图 片 被 缩放 ， 那 么 将 设置 规则 中 的 感叹 号 去 掉 即 可 。 
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例如 ， 如 果 我 只 想 让 网 站 根 目录 下 名 为 andthewinnerisnt 的 文件 夹 中 的 图 片 被 缩放 ， 
则 修改 后 的 代码 如 下 所 示 : 


<l f Module mod rewrite.c> 
Options +FollowSymlinks 
RewriteEngine On 


# Adaptive-Images -- ss steerer III 
RewriteCond %{REQUEST_URI} andthewinnerisnt 
# Send any GIF, JPG, or PNGrequest that IS NOT stored inside one of the above directories 


* to adaptive-images.php so we can select appropriately sized versions 
RewriteRule V.(?:jpe?g[|gif[png)$ adaptive-i mages. php 





* END Adaptive-Images -oo 
</ | f Modul e» 


这 就 是 要 设置 的 全 部 内 容 。 检 查 是 否 能 正确 生成 自 适应 图 片 的 最 简单 办 法 ， 就 是 在 网 页 
中 插入 一 张大 图 片 ， 然 后 用 手机 访问 这 个 页 面 。 之 后 用 FTP 软件 检查 ai - cache 文件 夹 
中 的 内 容 , 你 应 该 可 以 看 到 一 堆 文 件 , 以 及 使 用 屏幕 尺寸 断 点 命名 的 文件 夹 , 如 480 (如 
FA): 























天 zm (o 
View Window Sync ch 
(3 > A benfrain - E o a] /> httpdocs ass “| E aja 
Name ^ Size Date Name ^ Size Date 
> D adobe -- 21 May 2007 12:10 v D 480 -— 10 Oct 2011 11:42 
> Q android 一 15 Sep 2011 18:45 v 国 andthewinnerisnt -- 10 Oct 2011 11:42 
» È .cups -- 16 Jul 2009 21:26 v È cn3 -- 10 Oct 2011 11:42 
> [:3 DownloadManager -- 18 Jul 2008 03:18 v [3 code -- 10 Oct 2011 11:42 
* [I3] -dropbox 一 10 Oct 2011 10:54 v È img -- 10 Oct 2011 11:42 
> [3 .dvdcss -- 29 Jul 2011 23:57 * Lpng 218 KB 10 Oct 2011 11:42 
» 向] -filezilla -- 2 Sep 2011 13:45 » [3j downloads -— 8 Oct 2011 11:30 
> È .GalleryRemote -- 25 Apr 2007 18:13 > D ebay -- 10 Oct 2011 09:53 
> 国 jdarkroom -- 7 Aug 2009 21:19 » [3 images -- 8 Oct 2011 13:50 
» [3] mplayer -- 1 Jun 2008 22:00 » @ 1382 -- 7 Oct 2011 17:36 
> 国 .ssh -- 20 Jan 2009 19:08 
> [33] .sshterm -- 6 Jan 2011 12:23 
> [3] subversion -- 12 Sep 2009 00:51 
> È Trash -- 10 Oct 2011 12:38 
» È Xcode -- 22 Jan 2010 13:21 
> [Sy Applications 一 6 Sep 2011 11:41 
> D backup -- 25 Jul 2010 22:19 
> (Bj Desktop -- 10 Oct 2011 10:54 
* 国 Documents -- 10 Oct 2011 10:54 
> (ij Downloads -- 10 Oct 2011 10:54 
* È Dropbox -- 10 Oct 2011 10:54 
» 国 Library -- 19 Sep 2011 23:49 
» [3] LimeWire -- 24 Sep 2009 20:39 
» [5] Movies 一 10 Oct 2011 10:54 
> 国 Music -- 10 Oct 2011 10:54 
> 图 Pictures -- 10 Oct 2011 10:54 
» [33] Public -- 10 Oct 2011 10:54 
» 图 Sites -- 10 Oct 2011 10:54 
> [3] VirtualBox VMs -- 2 Aug 2011 16:20 
.bash_history 16KB — 60ct2011 11:43 
^^ bili 4KB — 2Nov20101734 
.CF89AA64 4KB 13 Apr 2011 11:00 














Adaptive Images 方案 不 仅 限 于 静态 网 站 , 它 也 可 以 被 用 于 内 容 管理 系统 ,而 且 在 JavaScript 
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被 禁用 的 情况 下 依然 有 效 。 自 适应 图 片 方案 给 我 们 提供 了 一 种 方法 ， 可 以 根据 屏幕 尺寸 
提供 完全 不 同 的 图 片 ， 为 那些 没有 必要 下 载 全 尺寸 大 图 的 设备 节省 带宽 。 
3.7 ”流动 网 格 布 局 和 媒体 查询 的 默契 配合 
在 本 章 的 前 面 ， 我 们 的 导航 链接 在 特定 的 视 口 宽度 下 回 折 成 两 行 。 我 们 可 以 使 用 媒体 查 
询 来 修正 这 个 问题 。 如 果 导 航 链接 在 1060 像素 下 散 得 太 开 而 在 768 像素 下 显示 正常 (我 
们 之 前 的 媒体 查询 做 好 了 处 理 )， 我 们 就 给 这 个 视 口 范围 设置 一 下 字体 样式 : 
Qmedia screen and (min-width: 1001px) and (max-width: 1080px) { 
navigation ul li a { font-size: 1.4em } 
} 
Qmedia screen and (min-width: 805px) and (max-width: 1000px) { 
#navi gation ul li a { font-size: 1.25em } 
} 
@media screen and (min-width: 769px) and (max-width: 804px) { 
#navigation ul li a { font-size: 1l.lem } 
} 
你 看 到 了 ， 我 们 根据 视 口 宽度 来 改变 文字 大 小 ， 结 果 就 是 这 组 导航 链接 在 769 像素 到 无 
穷 大 的 视 口 中 都 会 显示 在 一 行 。 这 是 媒体 查询 和 流动 布 忆 和谐 共 存 的 又 一 证 据 : 媒体 查 
询 约束 流动 布局 的 变动 范围 ， 而 流动 布局 则 简化 了 从 一 组 媒体 查询 样式 过 渡 到 另 一 组 的 
改变 过 程 。 
3.8 CSS 网 格 系统 





人 们 对 CSS 网 格 系统 /框架 的 看 法 误 贬 不 一 ， 有 人 和 夸赞 它 ， 有 人 咒骂 它 。 为 了 不 收 到 满怀 
怨恨 的 邮件 ， 我 声明 我 保持 中 立 。 我 能 理解 一 些 开 发 者 认为 网 络 系统 是 多 余 的 ， 某 些 情 
况 下 还 会 产生 一 些 匈 余 代码 ， 但 同时 我 也 很 欣赏 它们 在 快速 搭建 界面 布局 上 的 价值 。 
下 面 是 一 些 对 响应 式 设计 提供 了 不 同 程度 支持 的 CSS 框架 : 

C] Semantic (http://semantic.gs) ; 

O Skeleton (httpz//getskeleton.com) ; 








O Less Framework (http://lessframework.com) ; 
O 1140 CSS Grid (httpz//cssgrid.net); 


C] Columnal (http://www.columnal.com) s 


这 些 框架 中 ,我 个 人 最 喜欢 Columna 网 格 系统 ， 因 为 它 有 一 套 内 置 的 集成 了 媒体 查询 的 
流动 网 格 布局 ， 而 且 它 使 用 了 与 960.gs 框架 类 似 的 CSS 命名 ，960.gs 框架 是 一 套 广 为 开 
发 者 和 设计 师 所 熟知 的 非常 流行 的 固定 宽度 网 格 系统 。 
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Alpha, Omega 以 及 其 他 常用 的 网 格 类 名 


很 多 CSS 网 格 系统 都 使 用 一 些 特 定 的 CSS 类 来 完成 日 常 的 布局 工作 。 
row fecontai ner 类 不 言 自明 ， 但 经 常会 有 很 多 类 需要 说 明 。 因 此 ， 
Q noo ton 6 让 我 们 的 工作 更 加 
轻松 。 例 JAn, 
别 ou de e 个 元 素 (al pha 和 omega 类 中 会 去 除 
内 边 距 或 外 边 距 )， 还 有 . c0| x ， 其 中 x 指 的 是 该 元 素 横 跨 合并 的 列 数 
(col 6 表示 横 跨 6 列 )。 





使 用 网 格 系统 快速 搭建 网 站 = 


假设 我 们 还 没有 构建 流动 布局 ， 也 还 没有 编写 任何 媒体 查询 代码 。 我 们 手 里 只 有 And the 
winner isnm't... 网 站 首页 的 PSD 分 层 图 ， 且 被 要 求 使 用 HTML 和 CSS 尽 可 能 快 地 搭建 起 网 
站 的 基本 布局 结构 。 我 们 来 看 看 Columnal 网 格 系统 如 何 帮助 我 们 快速 实现 这 个 目标 。 

在 PSD 原始 设计 图 中 ,很 容易 看 出 网 站 是 16 列 布局 。 但 Columna 网 格 系统 最 大 只 支持 
12 列 ， 所 以 我 们 将 PSD 中 的 16 列 改 为 12 列 。 








AND THE WINNERIS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


EVERY YEAR 


UNSUNG HEROES... 





WHEN | WATCH THE 
OSCARS I'M ANNOYED... 
Mino y . fullinfo y King Kong. Moulin 
Rouge Munich 
OVERHYPED NONSENSE... 





3i THESE SHOULD HAVE WON >) 


NOTE: 008 OPINION IS ABSOLUTELY CORRECT. YOU ARE WRONG. EVEN IF YOU THINK YOU AF T THATS A FACT DEAL WITH IT 











下 载 Columnal 网 格 系统 的 压缩 包 然后 解压 ， 将 我 们 已 有 的 页 面 复制 一 份 ， 然 后 将 页 面 头 
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部 的 CSS 文件 链接 从 mai n. css 改 为 col umnal. css ,使 用 Columnal 系统 创建 页 面 结构 
的 关键 是 给 div 添加 正确 的 class。 下 面 的 代码 是 上 日 前 为 止 页 面 的 完整 标签 结构 : 


<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3.org/ TR/ xhtm 1/ DTD/ xhtml 1-transitional.dtd"'» 
«html xmlnsz'http:// www. w3.0rg/ 1999/ xhtml "> 





«head» 


«meta http- 





equi vz"Content- Type" contentz'text/html; charset=UTF-8" /> 


«meta namez'viewport" contentz'widthzdevice-width,initial-scalez1.0'[» 


«title»And 


the winner isn't.«/title» 


«script typez'text/javascript"»document.cookiez'resolutionz' «Math. max(screen. width 


screen. 


height) *&'; path=/'; </script> 


«link hrefz'css/columnal.css" rel="stylesheet" type="text/css" /> 


«[ head» 


«body» 


«div idz'wrapper'» 


«l-- the 


header and navigation --» 


«div idz'header'» 
«div idz'logo'»And the winner is«span»n' t... «[span»«[di v» 
«div idz"'navigation'» 


«ul» 


i 
< 
< 
< 
< 

i 





<!-- the 


<li><a hrefz'£'»Why?«[a»«[li» 
i ><a href=" #">Synopsis</a></li> 
i><a href=" #">Stills/Photos</a></li> 


><a href=" #">Videos/clips</a></li> 


i ><a href=" #">Quotes</a></li> 
i ><a href=" #">Quiz</a></li> 


content --> 


<div id="content"> 


<img cl 


ass="oscarMain" src="i mg/oscar. png" altz'atwi oscar" /> 


«hl»Every year «span»when | watch the Oscars l'm annoyed... </span></h1> 
«p»that films like King Kong, Moulin Rouge and Munich get the statue whilst 
the real cinematic heroes lose out. Not very Hollywood is it?«/p» 
«p»We're here to put things right. «/p» 
«a hrefz's"»these should have won G&raquo; </a> 


«I di v» 
<!-- the 


sidebar --» 


«div idz'sidebar'» 


«div cl 


ass-'sideBlock unSung'» 


«h4»Unsung heroes... </h4> 

«a href="#"><img srcz'img/ mi dni ghtRun.j pg" altz'Midnight Run" /></a> 

«a href="#"><img classz'sidel mage" srcez'img/ wyattEarp.j pg" alt=" Wyatt 
Earp" /></a> 


«I di v» 


«div classz'sideBlock overHyped'» 
«h4»0verhyped nonsense... «| h4» 
«a href="#"><img srcz'i mg/ muulinRouge.jpg" altz'Moulin Rouge" /></a> 
«a href="#"><img srcz'img/ kingKong.j pg" altz'King Kong" /></a> 


图 灵 社 区 会 员 lemoggy(lemoggy@foxmail.com) zz 尊重 版 权 


3.8 CSS 网 格 系统 69 





«[ di v» 
«[ di v» 
<!-- the footer --» 
«div idz'footer'» 
«p»Note: our opinion is absolutely correct. You are wrong, even if you think 
you are right. That's a fact. Deal with it.«/p» 
«| di v» 


«I di v» 


«[ body» 
«[ html > 


首先 ， 要 将 #wrapper div 设置 为 其 他 所 有 元 素 的 容器 ， 所 以 为 其 追加 , container 25: 


«div idz'wrapper" classz'container'» 





接着 往 下 看 ，AND THE WINNER ISN'T 是 页 面 的 第 一 行文 字 ， 所 以 为 头 部 追加 , row 25: 


«div idz'header" class="row"> 

网 页 logo 虽然 只 是 文字 ， WEITE, [HERES 12 列 。 因 此 为 其 追加 , col. 12 28: 
«div idz'logo" classz'col 12"'»And the winner is«sspan»n't...«/span»«/di v» 
紧 接着 一 行 是 导航 ， 所 以 为 其 追加 一 个 , row 25: 


«div idz'navigation" class="row"> 


然后 继续 根据 需要 给 元 素 追 加 , row 和 , col x 类 。 此 处 我 将 跳 过 后 续 的 修改 ， 因 为 我 觉 
得 重复 这 个 过 程 可 能 会 让 你 打上 师 。 下 面 展示 的 代码 就 是 修改 后 的 完整 页 面 标签 。 注 意 ， 
修改 中 需要 将 奥斯卡 图 片 挪 到 单独 的 一 列 中 。 另外 还 需要 给 #cont ent 和 #5si debar 外 面 
包 囊 一 层 类 名 为 , row 的 divo 


<! DOCTYPE html PUBLIC "-//W3C/] DTD XHTML 1.0 Transitional// EN" 

"http://www. w3.org/ TR/ xhtm 1/ DTD/ xhtml 1-transitional.dtd"'» 

«html xmlnsz'http:// www. w3.0rg/ 1999/ xhtml" » 

«head» 

«meta http-equivz"Content- Type" contentz'text/html; charset=UTF-8" /> 

«meta namez'viewport" contentz'widthzdevice-width,initial-scalez1.0" /> 

«title»And the winner isn't.«/title» 

«script typez'text/javascript'»document.cookiez'resol uti onz' tMat h. max(screen. width, 
screen.height) *&'; path=/'; </script> 

«link hrefz'css/columnal.css" rel="stylesheet" type="text/css" /> 

<link href="css/custom. css" rel="stylesheet" type="text/css" /> 















































</head> 
<body> 


<div id="wrapper" class="container"> 
<!-- the header and navigation --> 
<div id="header" class="row"> 
<div id="logo" class="col_12">And the winner is<span>n't...</span></div> 
<div id="navigation" class="row"> 
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«ul» 
<li><a hrefz'£'»Why?«[a»«[li» 
<li><a hrefz'£'»Synopsis«[/a»«[li» 
<li><a hrefz's'»Stills/Photos«/a»«[li» 
<li><a hrefz'£'»Videos/clips«[a»«[li» 
<li><a hrefz'£'»Quotes«/ a»«/li» 
<li ><a href=" #">Quiz</a></li> 


«ul» 
«div» 
«div» 
«div class="row"> 
«l-- the content --» 


«div idz'content" classz'col 9 alpha omega'» 
«img classz'oscarMain col 3" srcz'img/oscar.png' altz'atwi oscar" /> 
«div classz'col 6 omega'» 
«hl»Every year «span»when | watch the Oscars l'm annoyed... «/span»«/hl» 
«p»that films like King Kong, Moulin Rouge and Munich get the statue whilst 
the real cinematic heroes lose out. Not very Hollywood is it?</p> 
«p»We're here to put things right. «/p» 
«a hrefz's"»these should have won &raquo; </a> 
«[ di v» 
«[ di v» 
<!-- the sidebar --> 
«div idz'sidebar" classz'col 3'» 
«div classz'sideBlock unSung'» 
«h4»Unsung heroes... </h4> 
«a href="#"><img srcz'img/ mi dni ghtRun.j pg" altz'Midnight Run" /></a> 
«a href="#"><img classz'sidel mage" srcz'img/ wyattEarp.j pg" altz'Wyatt 
Earp" /> </a> 
«[ di v» 
«div classz'sideBlock overHyped'» 
«h4»0verhyped nonsense... «| h4» 
«a href="#"><img srcz'i mg/ muulinRouge.jpg" altz'Moulin Rouge" /></a> 
«a href="#"><img srcz'img/ kingKong.j pg" altz'King Kong" /></a> 
«[ di v» 
«[ di v» 
«| di v» 
<!-- the footer --» 
«div idz'"footer" class="row"> 
«p»Note: our opinion is absolutely correct. You are wrong, even if you think 
you are right. That's a fact. Deal with it.«[p» 
«[ di v» 


«I di v» 
«| body» 
«| ht ml > 


还 需要 给 custom. css 文件 中 追加 一 些 额外 的 CSS 样式 ， 该 文件 的 内 容 如 下 : 
dnavigation ul li ( 

display: inline-block; 
} 


#content { 
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loat: right; 


#sidebar ( 
loat: left; 





.SideBlock ( 
width: 1009; 
} 


.SideBlock img { 
max-width: 45% 


float:left: ME 
} 


.footer { 
float: left; 
} 


在 这 些 基 本 修改 完成 之 后 ， 在 浏览 器 窗口 中 就 能 看 到 页 面 的 基本 结构 已 经 搭 好 ， 且 页 面 
能 随 着 浏览 需 视 口 的 改变 而 缩放 。 





And the winner isn't 
4r 0 to a Web Site v CINE cocos a 会 D- 
1 D And the winner isa't. [*T p n "e 
And the winner isn't 





Why?  Syropsis  StEs/Photos  Videos/chps ^ Quotes Quiz 


Unsung heroes... 


Every year when | watch the 
Oscars l'm annoyed... 


that films like King Kong, Moulin Rouge and Munich get the statue 
whilst the real cinematic heroes lose out. Not very Hollywood is it? 


We're here to put things right. 


these should hava won » 





Note: our opinion is absolutely correct. You are wrong, even if you think you are right. Thats a fact. Deal with it. 








k 1050x814 





很 明显 还 有 很 多 细节 工作 要 做 (我 知道 ， 这 样 说 太 轻 描 淡 写 了 )， 但 如 果 你 需要 一 种 快速 
搭建 响应 式 网 站 结构 的 方法 ， 那 么 Columnal 这 样 的 CSS 网 格 系统 值得 考虑 。 
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3.9 ”小结 


本 章 ， 我 们 学 习 了 如 何 将 死板 的 像素 布局 的 网 页 结构 改造 成 灵活 的 百分比 布局 的 结构 ， 
学 习 了 如 何 使 用 em 来 替代 px 创建 更 加 灵活 的 文字 版 式 ， 掌 握 了 如 何 部 署 服务 器 端 解决 
方案 为 不 同 尺寸 的 设备 屏幕 提供 不 同 的 图 片 ， 从 而 保证 图 片 的 响应 性 和 流畅 缩放 。 最 后 ， 
我 们 试用 了 一 套 响 应 式 CSS 网 格 系统 , 它 能 让 我 们 以 最 快 的 速度 搭建 起 响应 式 网 页 结构 。 
不 过 到 目前 为 止 , 在 我 们 追求 响应 式 设计 梦想 的 过 程 中 , 一 直 使 用 的 是 HTML 4.01 标签 。 
第 1 章 我 们 提 到 过 HTMLS 带 给 我 们 的 一 些 好 处 。 这 些 好 处 对 响应 式 设 计 来 说 尤为 重要 和 
有 意义 ， 响 应 式 设 计 的 “移动 优先 ”( mobile first). 思想 使 它 很 适宜 采纳 最 简洁 、 最 有 效 
和 最 具 语 义 的 代码 。 下 一 章 ,， 我 们 将 认真 学 习 HTML5， 并 修改 页 面 标签 以 便 发 挥 最 新 最 
酷 的 HTML 规范 的 优势 。 
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4.1 


Il aX i& iT RR] HTML5 


HTMLS 是 从 Web Applications 1.0 项 目 发 展 而 来 的 ， 由 网 页 超 文本 技术 工作 小 组 
(WHATWG ) 发 起 , 后 被 W3C 采 纳 。HTML5 规范 的 大 部 分 内 容 都 偏重 于 处 理 Web 应 用 
程序 。 就 算 你 不 创建 Web 应 用 程序 ， 也 并 不 意味 着 HTMLS 对 你 制作 响应 式 设计 就 没有 
太 大 价值 。 所 以 ，HITML5 的 一 部 分 特性 与 制作 更 好 的 响应 式 网 页 直接 相关 (如 简洁 的 代 
码 )， 而 另 一 些 则 和 响应 式 设 计 没 太 大 关系 。 

HTMLS 还 提供 了 针对 表单 处 理 和 用 户 输入 的 特定 工具 。 这 些 特性 大 大 节省 了 为 表单 验证 
这 类 工作 而 在 复杂 技术 如 JavaScript 上 耗费 的 精力 。 不 过 我 们 将 在 第 8 章 再 单独 研究 
HTMLS 表单 。 


本 章 内 容 

O HTMLS 的 那些 部 分 我 们 现在 就 能 用 ? 

a 如 何 编写 HTMLS 网 页 

Q HTMLS 的 精简 之 道 

口 HTML 中 的 废弃 零件 

OQ HTMLS 中 的 全 新 语义 化 元 素 

口 使 用 无 障碍 网 页 应 用 技术 ( WALARIA ) 来 增强 语义 ， 支 持 辅助 技术 
Q RAK 

口 可 响应 的 HTML5 和 iFrame 视频 

口 让 网 站 支持 离线 使 用 



































HTML5 的 哪些 部 分 现在 就 能 


虽然 完整 的 HTML5 规范 尚 待 批准 , 但 是 现代 浏览 器 都 不 同 程度 地 支持 HTMLS 的 大 多 数 
新 特性 ， 这 些 浏览 絮 包 括 Safari, Google Chrome, Opera, Mozilla Firefox, ， 而 且 还 有 IE9! 
当前 HTML 标准 草案 的 内 容 最 终 未 必 全 都 会 出 现在 W3C 推荐 标准 中 ,但 其 中 有 很 大 一 
部 分 新 特性 现在 已 经 可 以 用 了 。 
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7A 第 4 章 响应 式 设计 中 的 HTML5 
4.1.1 大 多 数 网 站 可 以 用 HTML5 编写 





现在 ， 当 我 接 到 制作 网 站 的 任务 ， 选 择 的 默认 标签 会 是 HTMLS 而 不 是 HTML 4.01。 和 
几 年 前 的 情况 完全 相反 , 现在 , 你 得 给 网 站 不 使 用 HTML5 标签 一 个 说 得 过 去 的 理由 。 所 
有 现代 浏览 器 都 能 够 正确 理解 常见 的 HTML5 新 特性 (新 的 结构 元 素 、 视频 和 音频 标签 )， 
而 对 老 版 本 的 正则 可 以 使 用 腻子 脚本 来 弥补 我 所 遇 到 过 的 所 有 缺陷 。 

什么 是 腻子 脚本 ? 

腻子 脚本 ( polyfill ) 这 个 词 由 Remy Sharp 提出 ， 意 指使 用 腻子 来 补 平 老 版 
本 浏览 器 的 缺陷 。 因 此 ,腻子 脚本 具体 指 的 是 一 段 能 给 老 版 本 浏览 器 带 来 
新 特性 的 JavaScript 代码 。 值 得 注意 的 是 ， 腻 子 脚本 会 给 你 的 代码 里 追加 

多 余 的 代码 。 因 此 ， 就 算 你 添加 3 个 腻子 脚本 可 以 让 Internet Explorer 6 中 

网 站 的 演 染 效果 与 其 他 浏览 器 一 模 一 样 ， 也 并 不 意味 着 你 一 定 要 这 么 做 1 


























4.1.2 ”腻子 脚本 和 Modernizr 


通常 , 老 版 本 的 Internet Explorer ( IE9 以 前 的 版 本 ) 并 不 识别 HTML5 的 任何 新 语义 元 素 。 
但 是 不 久 前 ,Sjoerd Visscher 发 现 如 果 先 使 用 JavaScript 创建 这 些 元 素 , 那 Internet Explorer 
就 能 识别 这 些 元 素 并 可 为 其 设置 样式 。 基 于 这 一 发 现 , JavaScript 专家 Remy Sharp 开发 了 
一 个 轻 量 级 的 增强 脚本 ( http;//remysharp.com/2009/01/07/html5-enabling-script/ )， 在 
HTMLS 网 页 中 引入 该 文件 后 ， 就 能 神奇 地 让 老 版 本 IE 支持 新 HTML 元 素 。 长 期 以 来 ， 
HTMLS 的 先驱 们 都 会 在 页 面 中 骨 入 该 脚本 ， 以 便 让 使 用 正 6、7 的 用 户 享受 和 现代 浏览 
器 一 样 的 体验 。 

不 过 此 事 现 在 有 了 更 重大 的 进展 。 这 个 领域 上 出 现 了 一 个 新 丁 , 它 能 做 到 比 刚才 说 的 更 多 
的 事情 。 它 的 名 字 叫 Modernizr ( http://www.modernizr.com )， 如 果 你 正在 编写 HTMLS 页 
面 ,， 它 很 值得 你 去 关注 。 除 了 能 让 正 支 持 HTMLS 新 元 素 之 外 , 它 还 能 够 基于 一 系列 特性 
测试 来 有 条 件 地 加 载 更 高 级 的 腻子 脚本 ( polyfill )、CSS 文件 以 及 额外 的 JavaScript 文件。 
几乎 没有 什么 理由 不 使 用 HTML5， 所 以 我 们 将 开始 写 一 点 HTMLS 风格 的 页 面 。 


想 找 一 种 编写 优秀 HTML5 代码 的 捷径 ? 可 以 考虑 HTML5 样板 文件 
如 果 你 时 间 紧 迫 ， 但 却 需要 一 个 好 的 项 目 起 点 ， 可 以 考虑 使 用 HTML5 
M 样板 文件 ( http://html5boilerplate.com/ )。 样 板 文 件 是 一 个 预先 做 好 的 融 
合 了 “最 佳 实践 ”HIML5 文件 ， 包 含 一 些 基本 样式 ( 如 之 前 提 到 过 的 
normalize.css ), polyfill 和 一 些 必要 的 工具 如 Modernizr。 它 还 包含 一 个 
自动 合并 CSS 和 JS 文件 、 自 动 删除 注释 以 生成 生产 环境 代码 的 构建 工 
具 。 强 烈 推 荐 ! 
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4.2 如何 编 写 HTML5 网 页 


打开 一 个 已 有 的 网 页 。 你 可 能 会 看 到 文件 开头 有 这 样 几 行 代 码 : 


<! DOCTYPE html PUBLIC "-//W3C/] DTD XHTML 1.0 Transitional// EN" 
"http://www. w3.org/ TR/ xhtm 1/ DTD/ xhtml 1-transitional.dtd"» 

«html xmlnsz'http:// www. w3.0rg/ 1999/ xhtml" » 

«head» 

«meta http-equivz"Content- Type" contentz'text/html; charset=UTF-8" /> 


删除 上 面 的 代码 片段 并 将 其 替换 成 如 下 代码 片段 : 


<! DOCTYPE html» 
«html langz'en'» 
«head» 

«meta charsetzutf- 8» 


保存 刚才 的 文档 , 现在 你 就 有 了 自己 的 第 一 个 W3C 验证 器 (http://validator.w3.org/ ) 认可 
的 HTMLS 网 页 。 


不 要 担心 , 本 章 尚 未 结束 ! 刚才 这 个 简单 的 练习 只 是 为 了 展示 HTMLS 的 适应 性 。 这 只 是 
已 有 代码 的 一 次 演进 ， 而 不 是 彻底 革命 。 我 们 可 以 用 它 来 增强 我 们 已 经 掌握 的 标签 代码 。 
到 底 该 怎么 做 呢 ? 首先 ， 从 新 的 HTMLS 文档 类 型 声明 开始 : 
<! DOCTYPE ht ml > 
如 果 你 喜欢 用 小 写字 母 ，<! doctype ht ml > 也 没 问题 。 大 小 写 没有 区 别 。 
HTML5 文档 类 型 为 什么 这 么 简短 ? 

a HTMLS $5 «!'DOCTYPE html> 文 档 类 型 如 此 简短 ， 目 的 是 以 简洁 的 方式 

告诉 浏览 器 用 "标准 模式 ” 泻 染 页 面 。 这 种 简洁 高 效 的 思想 渗透 在 HTML5 

的 方方面面 。 






































在 文档 类 型 声明 之 后 ， 开 写 HTML 标签 ,设置 | anguage 属性 ， 然 后 开 写 部 分 : 
«html langz'en'» 

«head» 

你 会 说 汉语 吗 ? 

根据 W3C 的 定义 (http://dev.w3.org/html5/spec/Overview.html#attr-lang ), 
lang 属性 用 来 指定 页 面 元 素 内 容 和 元 素 属性 值 的 主语 言 。 如 果 你 的 网 页 
不 是 英语 内 容 , 你 最 好 设 定 正确 的 页 面 语言 。 例 如 对 于 中 文 网 页 , HTML 
标签 应 该 是 。 完 整 的 语言 列表 请 见 这 个 网 址 : http://www.iana.org/ 


assignments/language-subtag-registry o 





























最 后 ， 设 置 一 下 字符 编码 。met a 是 一 个 单 闭合 元 素 所 以 不 需要 关闭 标签 : 
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第 4 章 ， 响应 式 设计 中 的 HTMLS 





4.2.1 


4.2.2 


«meta charset=utf-8> 


字符 编码 通常 都 是 UTF-8 ， 除 非 你 有 特殊 理由 才 可 能 使 用 其 他 编码 。 























HTML5 的 精简 之 道 
我 记得 在 学 校 的 时 候 ， 对 我 们 超级 严厉 ( 其 实 是 对 我 们 负责 ) 的 数学 老师 最 后 都 会 因 教 
不 下 去 而 走 人 。 整 个 班级 里 充斥 着 被 解放 的 愉悦 ， 没 有 人 因此 对 “严厉 先生 ”( 用 这 个 名 
字 来 保护 那些 无 就 的 老师 ) 感到 居 惜 。 新 来 的 老师 一 般 都 很 和 莲 可 亲 ， 他 静 静 地 坐 在 讲 
台 上 ， 任 由 我 们 胡 闪 也 不 会 训斥 或 者 给 我 们 找 麻烦 。 他 没有 强制 要 求 我 们 在 学 习 时 要 保 
持 安静 , 也 不 关心 我 们 的 作业 题解 得 如 何 精巧 一 一 他 只 关心 答案 。 如 果 HTMLS 是 一 位 数 
学 老师 ， 那 它 一 定 是 那个 好 好 先生 。 接 下 来 我 将 证 明 这 个 奇怪 的 比喻 …… 
如 果 你 很 注意 代码 风格 ， 一 般 都 会 使 用 小 写字 母 ， 将 属性 值 用 引号 括 起 来 ， 而 且 会 为 脚 
本 或 样式 文件 链接 声明 t y pe 属性 。 例 如 ， 你 会 使 用 如 下 的 代码 来 引入 一 个 样式 表 : 
«link hrefz'CSS[ main.css" rel="stylesheet" type="text/css" /> 
HTMLS 中 不 需要 这 么 仔细 ， 这 样 写 它 一 样 乐于 接受 : 
«link href =CSS/main.css rel=stylesheet > 
你 看 了 一 定 感到 怪异 , 我 懂 我 也 明白 。 代 码 没 有 闭合 标签 的 斜 线 (/), 属性 值 没 有 用 引号 
括 起 来 , 没有 type 声明 。 但 是 ， 好 说 话 的 HTMLS5 不 在 意 这 些 。 第 二 行 示例 代码 和 第 一 
行 一 样 有 效 。 
这 种 宽松 的 语法 可 应 用 于 整个 文档 ， 而 不 仅仅 是 链接 CSS 和 JavaScript 文件 的 元 素 。 例 
如 定义 一 个 如 下 所 示 的 di v: 
«div id=wrapper> 
这 是 完全 有 效 合 法 的 HTMLS 代码 。 插 入 一 个 图 片 : 
«i mg SRC=frontCarousel. png altzfrontCarousel» 
这 样 同样 有 效 。 没 有 结束 标签 的 斜 线 , 没有 3 引号， 大 小 写 混杂 。 其 至 ,省略 <head> 元 素 ， 
页 面 依然 有 效 。XHTML 1.0 对 这 种 情况 会 怎么 说 呢 ? 







































































HTML5 标签 的 合理 写法 


虽然 我 们 的 目标 是 采纳 移动 优先 的 响应 式 设 计 和 开发 思想 ， 但 我 承认 无 法 完全 按照 我 所 
认为 的 最 佳 方式 来 编写 页 面 ( 注意， 我 所 举 的 例子 都 遵循 基于 XML 语法 的 XHTML 1.0 
规范 )。 使 用 这 种 精简 的 编码 方式 确实 可 以 节省 极其 微量 的 数据 ,但 老实 说 ， 如 果 有 这 个 
和 需要， 我 宁愿 通过 从 网 页 中 删 去 一 张 图 片 来 达到 同样 的 目的 。 
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4.2.3 


4.2.4 


对 我 而 言 ， 那 些 看 似 多 余 的 字符 ( 用 于 闭合 的 斜 线 和 属性 值 两 边 的 引号 ) 可 以 提高 代码 
的 可 读 性 。 因 此 在 编写 HTMLS 文档 时 我 倾向 于 在 老式 编写 风格 ( 这 样 风格 的 代码 在 
HTMLS 中 依然 有 效 ， 不 过 可 能 在 验证 需 或 类 似 检 查 工具 中 会 产生 一 些 警 告 ) 和 HTML5 
的 极 简 主 义 之 间 找 到 一 个 平衡 。 举 例 说 明 ， 以 上 节 的 CSS 链接 为 例 ， 我 会 这 样 写 : 
«link hrefz'CSS/ main.css" relz'stylesheet'/» 

我 闭合 了 标签 ， 使 用 了 引号 ， 但 删除 了 type 属性 。 关 键 是 找到 一 种 你 自己 满意 的 风格 。 
HTMLS 不 会 训斥 你 ,也 不 会 在 课堂 上 批评 你 糟糕 的 标签 代码 ， 更 不 会 因为 你 的 代码 没 通 
过 验证 而 罚 你 站 墙角 。 


伟大 的 <a> 标 签 万 岁 


HTMLS 中 一 个 真正 便利 的 精简 之 处 ， 是 我 们 可 以 在 标签 中 租 入 多 个 元 素 。( 哇 哈 哈 ! 终 
于 来 了 。) 以 前 ， 如 果 你 想 让 代码 通过 验证 ， 必 须 将 每 个 元 素 单独 使 用 标签 来 包 于 。 例 如 
以 下 代码 片段 : 

<h2><a hrefz'index.html ">The home page</a></h2> 


<p><a href="index. htm ">This paragraph also links to the home page</a></p> 
«a hrefz'index. html "»«i mg src="home-i mage. png" altz'home-slice" /»«/ a» 


ME, def ur AEG Baal 1 FAREI RAKAR : 
«a href="index. html "> 

<h2>The home page</h2> 

<p>This paragraph also links to the home page</p> 

<img src="home-i mage. png" alt="home-slice" /> 

«la» 


唯一 需要 记 住 的 是 一 一 很 明显 : IN BETE— T PRAECED — T ESAE, MLANBETEERAE TP RR 
套 表 单 。 

HTML 的 废弃 零件 
除了 script 链接 中 的 language 属性 , 还 有 很 多 你 可 能 已 经 习以为常 的 HTML 标签 或 属性 ， 
在 HTMLS 中 都 被 认为 是 “废弃 的 "。 HTMLS5 中 的 废弃 零件 分 为 两 类 一 一 暂 保 留 和 非 保 留 
的 。 暂 保留 零件 仍 可 正常 运行 但 验证 工具 会 报警 告 。 在 实际 开发 中 尽量 避免 使 用 ， 但 用 
了 也 不 会 让 天 塌 下 来 。 非 保留 的 零件 在 某 些 浏览 器 中 仍 可 以 泻 染 ,， 但 如 果 你 使 用 了 它们 ， 
别人 会 认为 你 是 奖 冥 不 化 的 ， 周 末 念 怕 谁 都 不 愿意 跟 你 玩 。 
举 个 使 用 暂 保留 的 废弃 零件 的 例子 ， 即 给 图 片 设 置 border 属性 。 这 种 方法 以 前 用 来 去 
掉 超 链接 中 图 片 的 蓝 色 边框 。 示 例 代 码 如 下 : 
«img srcz'frontCarousel.png" alt="frontCarousel" border="0" /> 
现在 则 建议 你 使 用 CSS 来 完成 同样 的 效果 。 
至 于 非 保留 的 废弃 零件 都 有 哪些 ， 多 了 去 了 。 坦 白地 说 ， 很 多 我 从 来 都 没 用 过 ( 有 些 其 
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4.3 


4.3.1 





至 见 都 没 见 过 ! )。 你 的 情况 可 能 和 我 差不多 。 如 果 你 好 奇 ， 可 以 在 后 面 这 个 网 址 找到 完整 
的 非 保留 废弃 零件 列表 : http://dev.w3.org/html5/spec/Overview.html#non-conforming-features。 
比较 常见 的 非 保留 废弃 零件 有 Strike、enter 、 font, acronym, frame 和 frameset 。 





HTMLS5 的 全 新 语义 化 元 素 


字典 中 对 语义 学 的 定义 是 “关注 语言 本 质 含 义 的 语言 学 和 逻辑 学 分 支 学 科 ”。 对 我 们 来 说 ， 
语义 化 是 给 我 们 的 标签 赋予 意义 的 过 程 。 为 什么 语义 化 很 重要 ?很 高 兴 你 问 这 个 问题 。 
看 看 And the winner isnt... 网 站 目前 的 标签 结构 : 


<body> 
«div idz'wrapper'» 
«div idz'header'» 
«div idz'logo'»«/di v» 
«div idz'navigation'» 
«ul» 
<li><a hrefz'£'»Why?«[a»«[li» 
</ul> 
</div> 
</div> 
<!-- the content --> 
<div id="content"> 


























</div> 
<!-- the sidebar --> 
<div id="sidebar"> 


</div> 
<!-- the footer --> 
<div id="footer"> 





</div> 
</div> 
</body> 
大 多 数 网 页 开发 者 能 看 懂 这 些 div 上 使 用 的 通用 的 用 命名 约定 一 一 header content sidebar 
等 等 。 但 是 对 于 代码 本 身 ， 任何 用 户 代 理 ( 网 页 浏览 器 、 屏 幕 阅读 器 、 搜 索引 人 擎 候 虫 等 ) 
看 到 这 段 代 码 都 无 法 确定 每 个 div 的 意义 。HTMLS5 旨 在 使 用 全 新 的 语义 化 元 素来 解决 这 
个 问题 。 接 下 来 将 从 页 面 结构 的 角度 来 讲解 这 些 元 素 。 


























<Section> 


<Ssection> 元 素 用 来 定义 文档 或 应 用 程序 中 的 区 域 (或 节 )。 例 如 ， 可 以 用 它 组 织 你 的 个 
人 信息 ,一 个 <secti on> 用 于 联系 信息 ， 另 一 个 用 于 新 闻 动 态 。 需 要 重点 理解 的 是 用 它 
的 目的 不 是 为 了 美化 样式 。 如 果 你 只 想 将 某 个 元 素 包 计 起 来 以 便 设 置 样式 ， 那 应 该 和 以 
前 一 样 继续 使 用 <di v». 
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C 想 知道 W3C 的 HTML5 标准 对 <secti on> 的 说 明 ， 请 访问 如 下 网 址 ; 
Q http://dev.w3.org/htmlS/spec/Overview.html#the-section-element。 


4.3.2 «nav» 


4.3.3 


4.3.4 


4.3.5 


<nayv> 元 素 用 来 定义 文档 的 主导 航 区 域 ， 甚 中 的 链接 指向 其 他 页 面 或 当前 页 面 的 某 些 区 
域 。 因 为 <nav> 用 于 主导 航 区 域 ， 所 以 严格 来 讲 它 不 是 为 页 脚 或 其 他 经 常会 包含 一 组 链 
接 的 区 块 而 设计 的 〈 虽 然 将 它 用 在 这 些 区 块 里 包含 链接 也 没 问题 )。 








Y 想 知道 W3C 的 HTMLS 标准 对 <nav> 的 说 明 ， 请 访问 如 下 网 址 : 
Q http://dev.w3. org/html5/spec/Overview.html#the-nav-element, 


<article> 


<article> 元 素 与 <secti on» 62S ARA RB. EKEMELE R e [i] 
iR ER X. «articl e»2628 Hoe Cur AA Br. MAEA, TH 
想 你 准备 放 和 人 <article> 标 签 的 内 容 能 和 否 作 为 一 个 整 块 而 被 复制 粘贴 到 另外 一 个 完全 不 
同 的 网 站 且 能 保持 完整 的 意义 ? 另 一 种 办 法 是 ， 想 想 包 庄 在 <arti cle> 中 的 内 容 能 否 在 
RSS 订阅 源 中 独立 成 为 一 篇 文章 ? 应 该 使 用 <arti cle > 标签 包 于 的 内 容 ， 最 明显 的 例子 
就 是 博客 正文 。 注 意 ， 如 果 出 现 般 套 的 <ar ti cle> 元 素 ， 那 内 层 的 <arti cle> 元 素 内 容 
应 该 和 外 层 文章 内 容 直 接 有 关 。 


























1 
Q 想 知道 W3C 的 HTMLS 标准 对 <arti cle> 的 说 明 ， 请 访问 如 下 网 址 ; 
http://dev.w3.org/html5/spec/Overview.html#the-article-element, 


<aside> 


«asi de> 元 素 用 来 表示 与 页 面 主 内 容 松 散 相 关 的 内 容 。 在 实践 中 ， 我 经 常 将 其 用 作 侧 边 
栏 ( 当 它 包含 合适 的 内 容 时 )。 另外 ,引文 、 广 告 以 及 导航 元 素 〈 如 友情 链接 等 ) 也 可 以 
使 用 它 。 








1 
Q 想 知道 W3C 的 HTMLS 标准 对 <asi de> 的 说 明 ， 请 访问 如 下 网 址 : 
http://dev.w3.org/htmlS/spec/Overview.html#the-aside-element。 
<hgroup> 








如 果 页 面 中 有 一 组 使 用 <h1>、<h2>、<h3> 等 标签 的 标题 、 标 语 和 副标题 ， 则 可 以 考虑 
使 用 <hgr oup > 将 它们 包 庄 起 来 。 这 样 在 HTMLS 的 大 纲 结构 算法 中 就 会 隐藏 次 级 标题 元 
素 ， 从 而 只 让 <hgr oup> 中 的 第 一 个 标题 元 素 进 入 文档 大 纲 。 
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HTML5 的 大 纲 结构 算法 

HTMLS 允许 每 个 <secti on> 容 需 有 自己 独立 的 大 纲 结构 。 这样 你 就 不 必 总 想 着 现在 是 几 
级 标题 了 。 例 如 在 一 个 博客 中 ， 博 文 的 标题 可 以 使 用 <h1> 标 签 ， 同 时 博客 内 容 的 标题 也 
可 以 包含 <h1> 标 签 。 请 见 如 下 代码 : 


<hgroup> 
<hl>Ben's blog</h1> 
<h2>Al| about what | do</h2> 
«[hgroup» 
«article» 
«header» 
«hgroup» 
«h1»A post about somethi ng«/ h1» 
«h2»Trust me this is a great read«/ h2» 
«h3»No, not really«/ h3» 
«p»See. Told you. </p> 
«[hgroup» 
«[ header» 
«article» 


尽管 代码 中 有 多 个 <h1 > 和 <h2 > 元 素 , 但 大 纲 结构 还 是 这 样 : 
* Ben's blog 








* A post about something 
因此 ， 你 就 不 必 吃 力 地 去 记 住 标题 级 别 了 ， 而 是 可 以 在 每 个 容器 中 随意 使 用 任何 级 别 的 
标题 元 素 ，HTML5 的 大 纲 结构 算法 令 自动 组 织 好 大 纲 。 可 以 使 用 下 面 的 HTML5 大 纲 生 
成 需 来 测试 生成 网 页 的 大 纲 结构 : 
O http://gsneders.html5.org/outliner/ 
O http://hoyois.github.com/html5outlier/ 


下 图 展示 了 HTMLS 大 纲 生 成 器 的 界面 : 














TW z.D 


HTML 5 Outliner 


Input HTML. 
Browse. 


Outline this! 


URL: 


Outline this! 


HTML. 


Outline this! 
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4.3.6 


4.3.7 


4.3.8 


4.4 


> 想 知 道 W3C 的 HTMLS 标准 对 <hgr oup> 的 说 明 ， 请 访问 如 下 网 址 : 
http://dev.w3.org/html5/spec/Overview.htmlstthe-hgroup-element , 
«header» 


由 于 <header > 元 素 不 计 入 大 纲 结构 ， 所 以 不 能 用 它 来 划分 内 容 结 构 ， 而 是 应 该 用 它 来 包 
含 对 区 域内 容 的 介绍 说 明 。 实 际 使 用 中 ，<header> 可 用 作 网 站 头 部 的 “ 刊 关 ”区域 , 也 
可 用 作对 其 他 内 容 如 <arti cle> 元 素 的 简要 介绍 。 











Cu. 想 知 道 W3C 的 HTMLS 标准 对 <header> 的 说 明 ， 请 访问 如 下 网 址 : 
Q http://dev.w3.org/htm15/spec/Overview.html#the-header-element , 


<footer> 


和 <header > 一 样 ，<f oot er > 元 素 也 不 计 和 人 大 纲 结构 ， 所 以 也 不 能 用 于 划分 内 容 结构 。 
应 该 用 它 来 包含 其 所 在 区 域 的 辅助 信息 。 例如 可 以 用 它 包 含 一 组 指向 其 他 页 面 的 超 链 接 ， 
或 者 用 它 包含 版 权 信息 。 和 <header > 一 样 ， 它 也 可 以 视 情 况 在 同一 个 页 面 上 多 次 出 现 。 
例如 博客 网 站 的 页 脚 可 以 用 它 ， 同 时 博客 正文 <ar ti c1e> 元 素 内 的 文 脚 也 可 以 用 它 。 不 
过 规范 指出 ， 博 文 作者 的 联系 信息 应 该 使 用 <address > 元 素来 包 庄 。 


























Tuy 想 知 道 W3C 65 HTMLS 标准 对 <f oot er > 的 说 明 ， 请 访问 如 下 网 址 : 
Q http://dev.w3.org/html5/spec/Overview.html#the-footer-element, 
<address> 


<address> 元 素 用 于 明确 地 标注 离 其 最 近 的 <article> 或 <body> 祖 先 元 素 的 联系 信息 。 
为 避免 产生 混淆 ， 请 记 住 <addr ess> 中 一 般 不 放 上 有 具体 的 邮政 地 址 ， 除 非 相 应 内 容 确 实 需 
要 联系 地 址 。 而 邮政 地 址 和 其 他 可 能 会 改变 的 联系 信息 应 该 使 用 <p o E ERE 3E 





~ 想 知道 W3C 的 HTMLS 标准 对 <address> 的 说 明 ， 请 访问 如 下 网 址 : 
Q http://dev.w3.org/html15/spec/Overview.html#the-address-element , 


HTMLS5 结构 元 素 的 实际 用 法 


我 们 来 看 几 个 使 用 刚才 所 讲 的 这 些 新 元 素 的 实际 例子 。 我 想 <header> 、<nav> 和 
«footer > 元 素 的 用 途 是 显而易见 的 , 所 以 先 从 它们 开始 。 从 And the winner isn't. 网 站 的 
首页 开始 ， 修 改 其 头 部 、 导 航 和 页 脚 ( 注意 看 下 面 代码 片段 中 加 粗 的 部 分 ): 
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<! DOCTYPE html» 

«html langz'en'» 

«head» 

«meta charsetzutf- 8» 

«meta namez'viewport" contentz'widthzdevice-width,initial-scalez1.0" /> 
«title»And the winner isn't...«[title» 
«script»document.cookiez'resolutionz' «Math. max(screen. wi dth, screen. height) *' ; 
path=/'; </script> 

<link href="css/main. css" rel="stylesheet" /> 


</head> 
<body> 
<div id="wrapper"> 
<!-- the header and navigation --> 
<header > 
«div idz'logo'»And the winner is<span>n't...</span></div> 
«nav» 
«ul» 
<li><a hrefz'£'»Why?«[a»«[li» 


<li><a hrefz'£'»Synopsis«[/a»«[li» 








i 
i 
<li><a hrefz's'»Stills/Photos«/a»«[li» 
<li><a hrefz's£'»Videos/clips«/a»«lli» 
<li><a hrefz'£'»Quotes«/ a»«/li» 
<li ><a href=" #">Quiz</a></li> 
</ul> 
«| nav» 
</ header» 
«l-- the content --» 


«div idz'content'» 
«i mg classz'oscarMain" src="img/oscar. png" altz'atwi oscar" /> 
«hl»Every year «span»when | watch the Oscars |'mannoyed...«/span»«[ hl» 
«p»that films like King Kong, Moulin Rouge and Munich get the statue whilst the 
real cinematic heroes lose out. Not very Hollywood is it?«/p» 
«p»We're here to put things right. «/p» 
«a hrefz's"'»these should have won &raquo; </a> 
«[ di v» 
<!-- the sidebar --> 
«div idz'sidebar'» 
«div classz'sideBlock unSung'» 
«h4»Unsung heroes... </h4> 
«a href="#"><img srcz'img/ m dni ghtRun.j pg" altz'Midnight Run" /></a> 
«a href="#"><img classz'sidel mage" srcz'img/ wyattEarp.jpg' altz'Wyatt Earp" 
1/ ></ 3a> 
«[ di v» 
«div classz'sideBlock overHyped'» 
«h4»0verhyped nonsense... </h4> 
«a href="#"><img src="i mg/moulinRouge. jpg" altz'Moulin Rouge" /></a> 
«a href="#"><img srcz'img/ kingKong.j pg" altz'King Kong" /></a> 
«[ di v» 
«[ di v» 
<!-- the footer --> 
«footer» 
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«p»Note: our opinion is absolutely correct. You are wrong, even if you think 
you are right. That's a fact. Deal with it.«/p» 
«[footer» 


«Idi v» 

«[ body» 

«| ht ml > 

不 过 ， 当 页 面 中 有 <article> 或 <section> 元 素 时 ， 则 刚才 所 说 的 这 三 个 元 素 在 每 个 页 
面 中 的 使 用 次 数 不 受 限制 。 每 个 <arti cle»zk«secti on> 元 素 都 可 以 有 自己 的 头 部 、 脚 
注 和 导航 。 例 如 ， 我 们 在 刚才 的 页 面 中 添加 一 个 <ar ti cle> 元 素 ， 代 码 如 下 : 


<body> 





«div id="wrapper"> 
<!-- the header and navigation --> 
«header» 
«div idz'logo'»And the winner is«span»n' t... «[span»«[di v» 
«nav» 
«ul» 
<li><a href=" #">Why?</a></li> 
</ul> 
</ nav» 
</ header» 
<!-- the content --> 
<div id="content"> 
<article> 
«header»An article about HTML5«/ header» 
«nav» 
«a hre 
«a hre 
«[ nav» 
«p»here is the content of the article«/p» 
«footer»This was an article by Ben Frain«/footer» 
«article» 


如 上 代码 所 示 ， 我 们 在 页 面 及 其 所 包含 的 <arti cle> 中 都 使 用 了 <header >、<nav> 和 
<f 00t er > 元 素 。 


接 下 来 继续 修改 侧 边 栏 区 域 ， 其 当前 的 HTML 4.01 标签 结构 如 下 : 


<!-- the sidebar --> 
«div idz'sidebar'» 
«div classz'sideBlock unSung'» 
«h4»Unsung heroes... «[h4» 
«a href="#"><img srcz'img/ mi dni ghtRun.j pg" altz'Midnight Run" /></a> 
«a href="#"><img classz'sidel mage" srcz'img/ wyattEarp.j pg" alt="Wyatt 
Earp" /></a> 
«[ di v» 
«div classz'sideBlock overHyped'» 
«h4»0verhyped nonsense... </h4> 
<a href="#"><img src="i mg/moulinRouge.jpg" alt="Moulin Rouge" /></a> 
<a href="#"><img srcz'img/ ki ngKong.j pg" alt="King Kong" /></a> 
«[ di v» 
«[ di v» 





"l.html"»related link 1«/a» 
"2.html"»related link 2«/a» 
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侧 边 栏 内 容 当 然 是 和 页 面 主 要 内 容 “ 略 微 ” 相关 的 , 所 以 首先 移 除 <di v i d="si debar"> 
并 将 其 替换 为 <asi de»: 


<!-- the sidebar --> 
«asi de» 

«div classz'sideBlock unSung'» 
«h4»Unsung heroes... </h4> 
«a href="#"><i mg sre="i mg/ mi dni ght Run. jpg" altz'Midnight Run" /></a> 
«a href="#"><img classz'sidel mage" srcz'img/ wyattEarp.j pg" alt=" Wyatt 

Earp" /></a> 

«[ di v» 

«div classz'sideBlock overHyped'» 
«h4»0verhyped nonsense...«[h4» 
«a href=" #"><i mg srce" i mg/ moul i nRouge. jpg" altz'Moulin Rouge" /»«/a» 
«a href="#"><img srcz'img/ kingKong.j pg" altz'King Kong" /></a> 











«I di v» 
«[asi de» 
代码 看 上 去 很 优雅 ! 但 是 如 果 在 浏览 器 中 看 到 效果 之 后 你 张口 器 女 也 是 情 有 可 原 的 ……… 
[ar —— TM "el B- ces a aol 
| u And the winner ism P 7 





AND THE WINNER IS 


Synopsis 
Sul Photos 
Videos/clips 
Quotes 


[a 
ROMERTDENMO CHARLES GRODIN 


A EVERY YEAR 


WHEN I WATCH THE OSCARS 
l'M ANNOYED... 


that films like King Kong, Moulin Rouge and Munich get 





the statue whilst the real cinematic heroes lose out. Not 
very Hollywood is it? 


We're here to put things right. 
these should have won 






































k 1114x1096 
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这 真是 进一步 退 两 步 ! 造成 这 种 糟糕 效果 的 原因 是 我 们 没有 针对 新 元 素 修改 CSS 代码 。 
在 我 们 继续 前 进 之 前 得 先 把 这 件 事 搞定 。 我 们 得 将 所 有 #header 引用 改 为 header ， 所 
有 #navigation 引用 改 为 nav， 所 有 ## ooter 引用 改 为 footer 。 例 如 ， 第 一 个 引用 
#header 的 CSS 规则 如 下 : 


#header { 
background-position: 0 top; 
background-repeat: repeat-x; 
background-image: url(../img/buntingSlice3l nvert. png) 
margin-right: 1.04166679; /* 10 + 960 */ 
margin-left: 1.0416667%, /* 10 + 960 */ 
width: 97.9166667% /* 940 + 960 */ 
} 


要 将 其 改 为 : 
header ( 
background-position: 0 top; 
background-repeat: repeat-x; 
background-image: url(../img/buntingSlice3l nvert. png) 
margin-right: 1.04166679; /|* 10 + 960 */ 
margin-left: 1.0416667*5; /* 10 960 */ 
width: 97.9166667*5 /* 940 + 960 */ 
} 
这 些 修改 非常 简单 ， 因 为 header navigation fil footer 作为 ID 与 其 对 应 要 修改 的 元 素 名 称 
一 致 一 一 我 们 只 需要 去 掉 “#” 即 可 。sidebar 则 有 些许 不 同 : 我 们 得 将 带 #s i debar 的 引 
用 改 为 asi de 。 不 过 ， 在 编辑 器 中 执行 “查找 与 替换 ”可 帮助 我 们 快速 完成 任务 。 简 要 说 
一 下 ， 类 似 这 样 的 CSS 规则 : 
#sidebar ( 
} 
aside { 


} 

即使 你 写 了 一 个 超 长 的 CSS 样式 文件 , 将 其 中 的 HTML 4.01 ID 名 称 替 换 成 HTMLS 元 素 
也 不 是 什么 难事 。 

注意 HTML5 中 的 元 素 复 用 


请 注意 , HTML5 页 面 中 可 能 会 有 多 个 <header>、<footer> 和 <asi de> 
元 素 ， 你 可 能 需要 为 每 一 个 都 编写 特定 的 样式 。 








M 


And the winner isnt.. 的 样式 修改 完成 后 ， 我 们 就 又 回 到 了 正轨 : 
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EU Q */nD- 





And the winner iur. 


CNW YN NN 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


UNSUNG HEROES... 


! EVERY YEAR 


WHEN I WATCH THE OSCARS 





that films like King Kong, Moulin Rouge and Munich get 
the statue whilst the real cinematic heroes lose out. Not 
very Hollywood is it? 


We're here to put things right 
these should have won » 








Má oios 








现在 ， 我 们 虽然 告知 了 用 户 代 理 Cünou vss ) 页 面 那 部 分 是 侧 边 栏 ， 但 其 中 又 含有 两 个 
独立 的 区 域 ，UNSUNG HEROES 和 OVERHYPED NONSENSE。 为 了 让 这 两 个 区 域 具有 
语义 ， 还 要 对 代码 做 进一步 修改 : 


«l-- the sidebar --» 
«aside» 
«section» 


«div classz'sideBlock unSung'» 
«h4»Unsung heroes... </h4> 
«a href="#"><img srcz'img/ mi dni ghtRun.j pg" altz'Midnight Run" /></a> 
«a href="#"><img classz'sidel mage" srcz'img/ wyattEarp.j pg" alt="Wyatt 
Earp" /></a> 
«[ di v» 
«[section» 
«section» 
«div classz'sideBlock overHyped'» 
«h4»0verhyped nonsense... «| h4» 
«a href="#"><img srcz'i mg/ mulinRouge.jpg" altz'Moulin Rouge" /></a> 
«a href="#"><img srcz'img/ kingKong.j pg" altz'King Kong" /></a> 
«[ di v» 
«[section» 
«aside» 
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需要 谨 记 的 是 ， 使 用 <secti on> 的 目的 不 是 为 了 美化 样式 ， 而 是 为 了 标识 一 个 鲜明 独立 
的 内 容 块 。 一 个 内 容 块 〈section ) 一 般 都 应 该 带 有 标题 ， 这 恰好 符合 我 们 的 需求 (用 于 
独立 标识 )。 考 虑 到 HTML5 的 大 纲 结构 ， 我 们 可 以 将 上 面 代码 中 的 <h4 > 标签 改 为 <h 1 > ， 
这 样 HTMLS 就 会 为 文档 生成 一 个 精确 的 大 纲 : 





HTMLS Outliner 
<)> | || hoyois github.com/htmiSoutliner/ v | | (SD Google a) A B- 


] D HTMLS Outliner [ + T X 


HTMLS Outliner 


Home > HTMLS Outliner 














This is a rudimentary front-end for my implementation of the HTML outline algorithm. See the GitHub repository page for 
technical details, and the Home page for a handy bookmarklet. 


Due to the limitations of working client-side, only direct text input is supported. If the input does not contain a <body> tag, an 
enclosing <body> element is created to compute the outline. Otherwise the outline of the first «body» element is shown. 











Input HTML Showioutineis Outline 
*section» v 1. Every year when I watch the Oscars I'm annoyed... 
«div classe"sideBlock «body», rank: —1, depth: 1, #nodes: 48 
unSung'? ToS : 
*hi»Unsung v 1.1. Navigation 


heroes. ..</h1> 

<a href="#" ><img <nav>, #nodes: 29 
Src-"img/midnightRun.jpq" alt-"Midnight Run" v 12. Aside 
7></a> 

<a href="#"><img <aside>, #nodes: 4 


class= "sidelmage" Src-"img/wyattEarp.jpq" 





alte"Wyatt Earp" /></a> v 12.1. Unsung heroes... 
</div> <section>, rank: —1, depth: 1, ?rodes: 14 
<, t > 
Med pets | » 1.2.2. Overhyped nonsense... 
Show the outlines of all sectioning roots <section>, rank: -1, depth: 1, #nodes: 14 
-j Parse as XML 
Marc Hoyois, September 2, 2011 
x là 873x725 














入 


网 站 的 主体 内 容 怎么 办 


你 可 能 会 觉得 有 点 奇怪 : 没有 一 个 专门 的 元 素 用 来 标记 页 面 主体 内 容 。 其 实 逻 辑 是 这 样 
的 ,既然 可 以 界定 除 主体 内 容 之 外 的 其 他 元 素 , 那么 剩 下 的 元 素 自然 就 是 页 面 的 主体 了 。 





a 


4.5 HTML5 的 文本 级 语义 元 素 


除了 前 面 讲 过 的 结构 元 素 ，HIML5 还 修订 了 一 些 被 称 之 为 行内 元 素 的 标签 。HTML5 标 
准 中 称 这 些 标签 为 文本 级 语义 元 素 (http://dev.w3.org/html5/spec/Overview.html#text-level- 
semantics )。 我 们 来 看 几 个 常用 的 例子 。 
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4.5.1 «b» 


过 去 ， 人 们 通常 利用 <b > 元 素 为 文本 添加 样式 ， 但 它 的 实际 用 途 其 实 是 “给 文本 加 粗 ”。 
不 过 现在 你 可 以 正式 地 将 其 仅 用 作 样 式 钩子 了 ， 因 为 现在 HTMLS 标准 对 <b> 的 定义 是 : 





Reps 一 小 段 文本 ， 纯 粹 为 了 吸引 人 的 注意 ， 除 此 之 外 不 传达 任何 重要 性 ， 也 不 
暗示 其 他 语 态 或 语气 ， 如 文档 摘要 中 的 关键 词 、 评 论 中 的 产品 名 称 、 交 互 式 文 
本 软件 中 的 可 操作 单词 ， 或 者 文章 的 导语 。 


4.5.2 «em» 


OK, 我 举 手 坦 日 , 我 也 常 利用 <e m> 为 文本 添加 样式 。 不 过 现在 我 需要 改进 使 用 方法 ， 因 
为 在 HTMLS 中 它 的 语义 是 : 








a 强调 内 容 中 的 重点 。 


因此 , 除非 你 确实 想 强 调 标签 中 的 内 容 , 否则 的 话 可 以 考虑 使 用 <b > 标签 或 者 可 以 的 话 使 
用 <i > 标签 。 








4.5.3 <i> 
HTMLS 标准 中 对 <i > 的 描述 如 下 : 


"— 一 小 段 有 不 同 语 态 或 语气 的 文字 ， 或 者 是 样子 上 与 普通 文章 有 所 差异 以 便 
标明 不 同 特点 的 文字 。 


简单 地 说 ， 它 不 仅仅 是 用 来 给 某 些 文字 加 斜体 效果 的 。 


4.5.4 ”在 页 面 中 应 用 文本 层 语义 元 素 


来 看 看 网 站 首页 主要 内 容 部 分 的 标签 ， 看 它 外 
标签 结构 如 下 : 


<!-- the content --» 

«div idz'content'» 
«i mg classz'oscarMain" src="img/oscar. png" altz'atwi oscar" /> 
«hl»Every year «span»when | watch the Oscars I'm annoyed... «[span»«[ hl» 
«p»that films like King Kong, Moulin Rouge and Munich get the statue whilst 

the real cinematic heroes lose out. Not very Hollywood is it?</p> 

«p»We're here to put things right. «/p» 
«a hrefz's"»these should have won &raquo; </a> 

«[ di v» 


确实 可 以 对 这 些 代 码 做 些 改善 。 首 先 ，<h1> 标 签 中 的 <span> 标 签 在 上 下 文中 毫 无 语义 ， 


用 户 代理 提供 更 好 地 语义 。 当 前 的 


CC 
zi 
amb 
CC 
zs 
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而 我 们 想 要 在 样式 中 为 其 设置 强调 效果 ， 所 以 在 HTML 代码 中 也 应 该 如 此 : 


<hl>Every year <em>when | watch the Oscars l'm annoyed...</em></h1> 


回顾 一 下 网 站 之 前 的 效果 : 





AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


EVERY YEAR 


WHEN | WATCH THE 
OSCARS I'M ANNOYED... 


e King Kong, Moulin 
Rouge Munich ; i 


THESE SHOULD HAVE WON 六 


NOTE DUR OPINION IS ABSOLUTELY CORRECT. YOU ARE WRONG, EVEN IF YOU THINK YOU ARE RIOHT. THAT'S A FACT. DEAL WITH IT. 


UNSUNG HEROES... 





full info full info. 


OVERHYPED NONSENSE... 





full info 


futi info. 














还 需要 给 电影 名 称 设置 不 同 的 样式 ， 但 它们 不 需要 带 有 不 同 的 语气 或 语 态 。 看 来 在 此 处 
使 用 <b > 标签 很 合适 : 


<p>that films like «b»King Kong</b>, «b»Moulin Rouge</b> and <b>Munich</b> get the 
statue whilst the real cinematic heroes lose out. Not very Hollywood is it?«/p» 


M 文本 层 语义 元 素 的 默认 样式 


根据 过 去 对 <b> 标 签 的 用 法 ， 很 多 浏览 器 仍 会 将 其 泻 染 为 粗 体 。 所 以 你 
可 以 根据 实际 情况 在 相关 的 CSS 代码 中 重 定义 其 默认 样式 。 








最 后 ， 当 我 说 ““we're here to things right” 时 ， 我 的 意思 是 我 不 是 瞎 胡 曾 的 ， 而 且 我 
想 让 用 户 代 理 ( 浏览 器 ) 知道 这 点 。 所 以 最 后 ， 我 们 将 这 句 话 使 用 <i > 标签 包 庄 。 你 可 
能 会 争论 说 此 处 应 该 使 用 <e m> 标 签 ， <em> 其 实 也 可 以 ， 但 我 准备 使 用 <i >。 修改 后 的 代 
码 如 下 : 


«p»«i »We're here to put things right.</i ></p> 
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4.6 


和 <b> 元 素 一 样 ， 浏 览 器 默认 会 将 <i > 中 的 文本 泻 染 为 斜体 ， 如 果 需 要 ， 就 重 定义 其 默认 
样式 吧 。 

现在 我 们 给 网 页 主要 内 容 中 添加 了 一 些 文本 级 语义 元 素 。HTML5 还 有 大 量 文本 级 语义 标 
签 ， 想 要 全 面 了 解 ， 请 查看 HTMLS 标准 中 的 相关 章节 ， 地 址 如 下 : 


http://dev.w3.org/html 5/spec/Overvi ew. htm s$text-level-semantics 





工作 更 上 一 层 楼 。 


遵循 WAI-ARIA 实现 无 障碍 站 点 


WAI-ARIA 是 Web Accessibility Initiative - Accessible Rich Internet Applications 的 缩写 ， 指 
无 障碍 网 页 应 用 技术 ， 它 主要 解决 一 个 问题 : 让 残障 人 士 能 无 障碍 地 访问 网 页 上 的 动态 
内 容 。 这 种 技术 提供 了 一 种 描述 自 定义 组 件 〈 网 页 应 用 中 的 动态 片段 ) 的 角色 、 状 态 和 
属性 的 方法 ， 这 样 这 些 组 件 就 可 以 被 依赖 辅助 技术 的 用 户 找 到 并 加 以 利用 。 

例如 ， 屏 幕 上 的 一 个 组 件 正 在 显示 不 断 变 化 的 股票 价格 ， 如 何 让 访问 网 页 的 育 人 用 户 也 
知道 这 一 点 呢 ? 无 障碍 网 页 应 用 技术 就 在 尝试 解决 这 类 问题 。 本 书 着 眼 点 不 在 于 全 面 讲 
解 无 障碍 网 页 应 用 技术 ( 想 要 全 面 了 解 ， 请 查看 http:Wwww.w3.org/WAJUintro/aria )， 但 我 
们 可 以 采纳 其 中 一 部 分 容易 实施 的 技术 ,将 其 应 用 到 HTML5 网 站 中 ， 以 方便 残障 用 户 。 
如 果 你 接 了 一 个 为 客户 制作 网 站 的 任务 ， 除 了 基本 要 求 之 外 通常 不 会 给 你 专门 的 时 间 / 经 
费 来 增加 无 障碍 支持 (悲剧 的 是 ,无 障碍 性 经 常 被 完全 抛 诸 脑 后 )。 但 我 们 还 是 可 以 使 用 
无 障碍 网 页 应 用 技术 中 的 地 标 角 色 (landmark role ) 来 修正 HTML 语义 元 素 的 一 些 明 显 
的 不 足 ， 从 而 使 支持 无 障碍 网 页 应 用 技术 的 屏幕 阅读 器 可 以 在 不 同 的 页 面 区 块 之 间 轻 松 
跳 转 。 















































ARIA 的 地 标 角色 


在 响应 式 网 页 设计 中 实现 ARIA 的 地 标 角 色 ， 跟 响应 式 设 计 没 有 什么 关系 。 可 是 ， 在 某 
种 程度 上 支持 它 一 下 又 非常 简单 (而且 不 必 作 任何 修改 就 保证 通过 HTMLS 验证 )， 假 如 
为 了 省 那么 点 事 儿 ,就 对 从 今 往 后 编写 的 所 有 HTMLS 页 面 持 放任 态度 ,似乎 也 真 不 值得 。 
好 了 ,不 贫 了 ,来 看 看 怎么 做 吧 。 


新 的 HTML5 导航 区 域 结构 如 下 : 


<nav> 
«ul» 
<li><a hrefz'£'»Why?«[a»«[li» 
<li><a hrefz'£'»Synopsis«[/ a»«lli» 
<li><a hrefz'£"»Stills/Photos«/a»«[li» 
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<li><a hrefz'£'»Videos/clips«[a»«[li» 
<li><a hrefz'£'»Quotes«/a»«[li» 
<li ><a href=" #">Quiz</a></li> 
</ul> 
«[ nav» 


我 们 可 以 让 导航 区 域 在 支持 无 障碍 网 页 应 用 技术 的 屏幕 阅读 器 上 轻松 地 定位 ， 只 需 为 其 
追加 一 个 地 标 角色 属性 role 即 可 ， 如 下 面 的 代码 片段 所 示 : 


«nav role="navigation"> 
«ul» 

<li><a hrefz'£'»Why?«[a»«[li» 

<li><a hrefz'£'»Synopsis«[a»«[li» 

<li><a href=" #">Stills/Photos</a></li> 
# 
# 
# 








<li><a href="#">Videos/clips</a></li> 
<li ><a hrefz'£'»Quotes«/a»«[li» 
<li><a href=" #">Quiz</a></li> 
</ul> 
«[ nav» 


够 简单 吧 ? 针 对 文档 结构 的 各 部 分 分 别 有 如 下 的 地 标 角 色 。 

Qapplication: 用 来 定义 用 作 网 页 应 用 的 区 域 。 

口 banner : 用 来 定义 一 个 站 点 级 别 〈 而 不 是 某 个 特定 文档 的 ) 的 区 域 。 如 网 站 的 头 部 和 

logo。 

Qcomplementary: 用 来 定义 一 个 对 页 面 主 要 区 域 进行 补充 说 明 的 区 域 。 在 And the 
winner isn’t.. XA Anit, UNSUNG HEROES 和 OVERHYPED NONSENSE 区 域 就 可 
以 定义 为 complement ary。 

Qcontentinfo: 用 来 定义 与 页 面 主要 内 容 相关 的 信息 区 域 。 例 如 页 脚 的 网 站 版 权 信 息 

区 域 。 

口 for m: 你 猜 都 能 猜 到 ， 定 义 表 单 ! 但 注意 ， 如 果 表 单 用 于 搜索 ， 则 请 使 用 search 来 

替代 。 

Q main: 定义 页 面 的 主体 内 容 。 

口 navi gati on: 用 来 定义 链 向 当前 文档 或 相关 文档 的 导航 链接 。 

口 search: 用 来 定义 一 个 用 于 搜索 的 区 域 。 


无 障碍 网 页 应 用 技术 进 阶 


无 障碍 网 页 应 用 技术 并 非 只 有 地 标 角色 。 想 要 做 进 阶 应 用 ， 请 参阅 完整 
的 角色 列表 及 其 简要 使 用 说 明 :http://www.w3.org/TR/wai-aria/roles#role_ 


definitions。 





























让 我 们 从 头 开 始 ， 将 现在 HTMLS 版 的 And the winner isnt... 网 站 标签 使 用 地 标 角 色 加 以 
扩展 : 
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«body» 

«div idz'wrapper'» 
<!-- the header and navigation --> 
«header rolez"'banner'» 








«div idz'logo'»And the winner is«span»n't... «[ span»«[di v» 
«nav rolez"navigation'» 
«ul» 
<li><a hrefz'£'»Why?«[a»«[li» 
<li><a hrefz'£'»Synopsis«[/a»«[li» 
<li><a hrefz'£'»Stills/Photos«/a»«[li» 
<li><a hrefz'£'»Videos/clips«[a»«[li» 
<li><a hrefz's£'"»Quotes«/a»«[li» 
<li><a hrefz'£'»Quiz«/ a»«l[li» 
«[ul» 
«[ nav» 
«[ header» 
<!-- the content --> 


«div idz'content" rolez"'main'» 
«i mg classz'oscarMain" src="img/oscar. png" altz'atwi oscar" /> 
«hl»Every year «em»when | watch the Oscars l'm annoyed..«/ em»«/ h1» 
«p»that films like «b»King Kong«/ b», «b»Moulin Rouge«/b» and «b»Munich«/ b» 
get the statue whilst the real cinematic heroes lose out. Not very 
Hollywood is it?</p> 
«p»«i »We're here to put things right. </i ></p> 
«a hrefz'£'»these should have won &raquo; </a> 
«[ di v» 
<!-- the sidebar --> 
«aside» 
«section rolez'complementary"» 
«div classz'sideBlock unSung'» 
«hl»Unsung heroes...«/hl» 
«a href="#"><img srcz'img/ mi dni ghtRun.j pg" altz'Midnight Run" /></a> 
«a href="#"><img classz'sidel mage" srcz'img/ wyattEarp.j pg" altz'Wyatt 
Earp" [»«[a» 
«[ di v» 
«[section» 
«section rolez'complementary"» 
«div classz'sideBlock overHyped'» 
«hl»0verhyped nonsense... </h1> 
<a href="#"><img src="i mg/moulinRouge.jpg" alt="Moulin Rouge" /></a> 
<a href="#"><img src="i mg/kingKong.j pg" alt="King Kong" /></a> 
«[ di v» 
«[section» 
«[asi de» 
<!-- the footer --» 
«footer rolez'contenti nfo'» 
«p»Note: our opinion is absolutely correct. You are wrong, even if you think 
you are right. That's a fact. Deal with it.«/p» 
«[footer» 





«I di v» 
«| body» 
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4.7 


4.8 


使 用 非 可 视 桌 面 阅读 器 (NVDAO 免费 测试 网 站 可 访问 性 


如 果 你 是 在 Windows 平 台 上 开发 且 想 使 用 屏幕 阅读 器 测试 网 站 的 可 访 
问 性 ， 可 以 免费 使 用 NVDA。 软 件 的 官方 地 址 如 下 : http//www.nvda- 


project.org/. 





希望 本 节 对 无 障碍 网 页 应 用 技术 的 简要 介绍 ， 让 你 看 到 了 为 使 用 辅助 技术 的 用 户 提供 一 
定 可 访问 性 支持 还 是 很 简单 的 ,希望 你 能 在 下 一 个 HIML5 项 目 中 考虑 一 下 。 








为 使 用 了 无 障碍 技术 的 元 素 设置 样式 


和 其 他 属性 一 样 ， 可 以 直接 使 用 属性 选择 器 来 为 其 设置 样式 。 如 ， 使 用 
nav[role="navigation"] {} 可 以 为 导航 区 域 设置 样式 。 
在 HTML5 "P iz A UN 

















对 很 多 人 来 说 ，HTML5 首次 进入 他 们 的 视线 是 在 苹果 公司 拒绝 在 10S 设备 上 文 持 Flash 
的 时 候 。Flash 作为 浏览 右 视 频 服务 插件 已 经 获得 了 市 场 主导 (有 人 说 是 市 场 礁 断 ) 地 位 。 
但 是 ,苹果 公司 没有 使 用 Adobe 的 专 有 技术 ， 而 是 决定 依靠 HTML5 来 处 理 富 媒 体 演 染 。 
HTMLS 本 身 在 这 一 领域 已 经 有 了 长 足 进 步 ， 蔷 果 公 司 对 HTMLS 的 公开 支持 又 极 大 促进 
了 它 的 发 展 ， 并 使 其 媒体 工具 在 公众 中 万 得 了 更 广泛 的 青睐 。 

正如 你 所 预想 ，IE8 及 更 低 版 本 都 不 支持 HTMLS 视频 和 音频 。 不 过 给 微软 的 “先天 不 足 ” 
的 浏览 器 提供 备用 解决 方案 也 很 简单 ， 稍 后 我 们 会 讨论 这 个 问题 。 其 他 现代 浏览 器 
( Firefox 3.5+, Chrome 4+, Safari4, Opera 10.5+, Internet Explorer 9+、iOS 3.2+、Opera 
Mobile 11+, Android 2.3+ ) 都 没 问题 。 


























用 HTML5 的 方法 为 页 面 添加 视频 或 音频 


说 实话 ， 我 发 现在 HTML 4.01 网 页 中 添加 视频 或 音频 媒体 完全 是 一 种 折磨 。 不 是 因为 它 
很 难 ， 而 是 很 麻烦 。HTMLS5 使 这 件 事情 变 简 单 了 。 添 加 多 媒体 的 语法 和 添加 图 片 类 似 : 


«video src="myVideo.0gg"></video> 


对 很 多 网 页 设计 师 来 说 简直 如 沐 春 风 ! 不 再 需要 向 网 页 中 引入 一 大 堆 代 码 ， 在 HTMLS 
中 只 需要 一 个 <vi de0></ vi deo> 标 签 (音频 使 用 <audi o»«/ audi0> 标 签 ) 就 能 搞定 这 
种 吃力 活 。 还 可 以 在 开始 标签 和 结束 标签 之 间 插 入 文字 用 以 告知 那些 使 用 不 兼容 HTMLS 
浏览 器 的 用 户 ， 此 外 还 支持 你 一 般 都 会 追加 的 附加 属性 如 height 和 width。 我 们 把 这 
些 都 加 上 : 
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«video srcz'vi deo/ myVi deo. mp4" wi dth="640" heightz'480'»What, do you mean you don't 
understand HTML5?«J/ vi deo» 


现在 将 上 面 这 段 代码 插入 我 们 的 网 页 然后 在 Safari 中 查看 ， 视 频 就 会 出 现 但 没有 播放 控 
制 栏 。 想 要 显示 默认 的 播放 控制 栏 则 需要 追加 controls 属性 。 我 们 还 可 以 追加 
autoplay 属性 (不 建议 一 一 因为 大 家 都 讨厌 自动 播放 的 视频 ， 这 是 常识 )。 修 改 后 的 代 
码 如 下 : 


«video src="video/myVideo. mp4" wi dthz"640" height="480" controls autoplay»What, do 
you mean you don't understand HTML5?«/vi deo» 


上 面 的 代码 所 产生 的 效果 如 下 图 所 示 : 














V9V99V9VV999VV9V9999999V99999VI 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS  VIDEOS/CLIPS QUOTES QUIZ 








AAAAAAAAAAAAAAAAAAAAAAAAAA, 











其 余 的 属性 还 包括 用 来 控制 媒体 预 加 载 的 preload (HTMLS 的 早期 尝鲜 者 应 该 注意 
preload 替代 了 原先 的 aut obuffer )， 用 来 重复 播放 视频 的 1 oop, ， 以 及 用 来 定义 视频 
缩 略 图 的 poster (这 个 属性 在 视频 播放 延迟 时 非常 有 用 )。 要 使 用 某 个 属性 ， 将 其 追加 
到 标签 中 即 可 。 下 面 的 例子 包含 了 刚才 提 到 的 所 有 属性 : 

«video srce'video/ myVi deo. mp4" width="640" height="480" controls autoplay 


preloadz'auto" loop poster-'myVideoPoster.jpg'»What, do you mean you don't 
understand HTML5?«/ vi deo» 
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4.8.1 


4.8.2 


提供 备用 的 媒体 源 文件 


最 初 的 HTML5 规范 呼吁 所 有 浏览 器 内 置 支持 使 用 Ogg 格式 "直接 播放 视频 或 音频 ( 无 需 
插件 ), 但 是 由 于 HTMLS5 工作 组 的 内 部 争议 , 曾经 作为 基线 标准 的 支持 Ogg 包括 Theora 
video 和 Vorbis audio ) 的 主张 在 最 近 更 新 的 HTML5 规范 中 被 放弃 。 因 此 目前 的 情况 是 ， 
一 些 浏 览 器 支持 某 一 套 视频 和 音频 文件 格式 ， 而 男 一 些 浏览 器 则 支持 其 他 格式 。 例 如 
Safari 只 允许 在 <vi deo> 和 <audi o> 元素 中 使 用 MP4/H.264/AAC 媒体 文件 , 而 Firefox 和 
Opera 则 只 支持 Ogg fll WebM, 

















为 什么 我 们 不 能 和 有 睦 相 处 ! (《 火 星人 玩 转 地 球 》，http://movie.douban.com/ 
subject/1297715/, ) 


谢 天 谢 地 ， 有 一 种 方法 能 在 一 个 标签 内 支持 多 种 媒体 格式 。 但 是 这 种 方法 并 不 能 免除 我 
们 为 一 个 媒体 文件 创建 多 种 版 本 。 我 们 都 期 望 这 个 问题 在 将 来 某 个 适当 的 时 刻 会 自行 解 
决 ， 此 时 我 们 手 握 多 种 格式 的 媒体 文件 ， 则 可 以 这 样 编写 视频 标签 : 


«video widthz'640" height="480" controls autoplay preloadz'auto" loop 
posterz'myVideoPoster.jpg'» 

«source srce'vi deo/ myVideo.ogv" typez'video/09g'» 

«source srcz'vi deo/ myVi deo. mp4" typez'vi deo/ mp4" » 

What, do you mean you don't understand HTML5? 
</ vi deo» 


如 果 浏 览 器 支持 Ogg 格式 , 则 使 用 第 一 个 文件 ; 否则 它 会 继续 往 下 解析 下 一 个 <s 0ur ce> 
标签 。 


针对 老 版 本 浏览 器 的 备用 方案 


照 这 种 方式 使 用 <s our ce > 标签 ,我 们 就 能 根据 需要 提供 一 系列 备用 方案 。 例如 在 提供 了 
MP4 和 Ogg 格式 之 后 ， 如 果 我 们 还 想 给 IE8 及 更 低 版 本 提供 一 个 优雅 的 备用 方案 ， 则 可 
以 追加 一 个 Flash。 更 进一步 ， 如 果 用 户 的 浏览 器 没有 任何 合适 的 媒体 播放 技术 ,我们 还 
可 以 为 其 提供 媒体 文件 的 下 载 链 接 : 


«video widthz'640" heightz'480" controls autoplay preloadz'auto" loop poster- 

"myVi deoPoster.jpg'» 

«source srcz'vi deo/ myVi deo. mp4" typez'vi deo/ mp4" » 

«source srcz'vi deo/ myVideo.ogv" typez'video/09g'» 

«object widthz'640" heightz'480" typez'application/x-shockwave-flash" 
dataz'myFlashVi deo. SWF" » 

«param name="movie" valuez'myFlashVideo.swf" /> 

«param name="flashvars" valuez'control barzover&amp; i magezmyVi deoPoster 
jpg&amp; filezvideo/myVi deo. mp4" /> 

«i mg srcz'myVideoPoster.jpg' width="640" heightz'480" altz" TITLE . 








(D 详 见 http://baike.baidu.com/view/99249.htm。 一 一 译 者 注 
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title=" No video playback capabilities, please download the video below" /> 
«| object» 
«p» «b»Download Video: </b> 
MP4 Format: <a hrefz'myVi deo. mp4* 5" MP4" «/ a» 
Ogg Format: <a hrefz'myVi deo. ogv'»'Ogg' «/a» 
«| p» 
</ vi deo» 


4.8.3 ”和 标签 的 用 法 基本 一 致 


«audi o> 标签 的 用 法 与 <vi deo> 基 本 一 致 , 除了 wi dth、hei ght 和 poster 之 外 其 他 属 
性 基本 相同 。 你 其 至 可 以 将 <vi deo> 和 <audi0> 标 签 互 换 使 用 。 两 者 之 间 的 最 大 差别 就 
是 <audi0> 没 有 可 视 内 容 的 播放 区 域 。 














4.9 响应 式 视频 


以 上 我 们 可 以 看 出 ， 支 持 老 版 本 浏览 器 会 一 如 既往 地 导致 代码 变 得 爱 肿 。<vi deo> 标 签 
从 刚 开始 的 一 两 行 变 成 到 最 后 的 十 多 行 ( 增加 了 一 个 Flash 文件 )， 仅 仅 是 为 了 让 老 版 本 
浏览 器 舒坦 工作 ! 对 我 而 言 ,我 更 乐意 忘掉 Flash 备用 方案 以 追求 更 精简 的 代码 ,不 过 每 
种 用 法 都 各 有 优 劣 。 

现在 , 我 们 可 爱 的 HTML5 视频 的 唯一 问题 是 它 不 是 响应 式 的 。 没 错 , der eoe ttd 
响应 式 网 页 却 不 怎么 响应 。 看 看 下 面 的 截图 ， 你 最 好 忍 着 不 要 揣 泪 : 


























vvVVVVVYVVVVVYVVYVVYNV 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 
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幸运 的 是 ， 对 于 HTMLS 式 艇 入 视频 ， 修 正方 法 很 简单 。 只 需 删 除 视频 标签 中 的 hei ght 
和 width 属性 (如 删除 wi dth="640" hei ght="480")， 然 后 在 CSS 中 追加 如 下 代码 : 
video { max-width: 1009; height: auto; } 

这 种 方法 对 本 页 面 中 的 视频 文件 很 有 用 ， 但 它 不 能 解决 使 用 iframe IAS IUS s] 
问题 拜 YouTube , Vimeo 等 等 视频 网 站 所 赐 ), 下 面 的 代码 可 以 在 网 页 中 插入 来 自 YouTube 
的 电影 《午夜 狂奔 》" 的 预告 片 : 


«iframe width="960" heightz"720" src="http://www. youtube. com embed/ B1 N28DA3gY" 
frameborderz"0" allowfullscreen»«/iframe» 


暂且 不 管 之 前 的 CSS 规则 ， 现 在 的 效果 如 下 : 











vVVVYVYYVYVYVVVVVVYYYYVYVYS. 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS "VIDEOS/CLIPS QUOTES QUIZ 





Midnight Run (1988) - Theatrical Trailer (Long 














RMA e GRE V? XS CTRIORARAN Y 很 有 多 方法 可 以 解决 这 个 问题 ， 但 截至 目前 我 见 过 
的 最 简单 的 办 法 是 使 用 一 个 名 为 FitVids 的 jQuery 小 插件 。 我 们 来 看 看 将 这 个 插件 应 用 到 
And the winner ism't.. 网 站 中 到 底 有 多 简单 。 


首先 引入 jQuery 库 文件 。 在 页 面 的 <head> 元 素 中 加 载 该 文件 。 此 处 我 使 用 来 自 Google 











中 《午夜 狂奔 》 http://movie.douban.com/subject/1294699/。 一 一 译 者 注 
@) 德 尼 罗 :《 午 夜 狂 奔 》 的 主演 ， 截 图 中 右边 那 位 先生 。 一 一 译 者 注 
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的 内 容 分 发 网 络 (CDN ) 的 文件 。 

«script srce'https:/[ajax.googleapis.com/ajax/libs/jquery/1.6.4/j query. min.js'» 
«script» 

其 次 ， 从 网 站 http:Wfitvidsjs.com/ 上 下 载 FitVids 插件 (有关 该 插件 的 更 多 信息 请 见 
http://daverupert.com/201 1/09/responsive-video-embeds-with-fitvids/ )。 


将 FitVids 文件 存 人 一 个 合理 的 文件 夹 ( 假设 文件 夹 名 为 “js”), 然后 在 <head> 中 引入 该 
文件 : 
«script src="js/fitvids.js"></script> 


最 后 ， 只 需 使 用 jQuery 指定 包含 YouTube 视频 的 特定 元 素 。 本 例 中 我 将 《午夜 狂奔 》 视 
频 放 入 了 id 为 #content 的 div rp: 
<script> 
$(document).ready(function()( 
|] Target your .container, .wrapper, .post, etc. 
$("4content').fitVi ds(); 


n; 
«script» 


只 需 这 三 步 。 多 亏 有 了 FitVid 搬 件 ,现在 我 们 有 了 一 个 完全 可 啊 应 的 YouTube 视频 。( 注 
意 : 小 子 ， 不 要 向 视频 中 的 德 尼 罗 学 习 ， 吸 烟 有 害 健 康 ! ) 











" 


VVVVVVVVVVVVVVVNYNVNYNYYYYNS 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 














哈哈 ， 全 部 搞定 。 这 下 我 就 又 可 以 收 到 鲍 比 的 圣诞 贺卡 了 ! 
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4.0 Ej Web 应 用 


虽然 HTMLS 中 的 大 量 新 特性 对 我 们 的 响应 式 设计 没有 明显 帮助 ( 如 地 理 定位 API )， 但 
离线 Web 应 用 应 该 还 有 点 用 处 。 我 们 知道 肯定 会 有 越 来 越 多 的 移动 设备 用 户 访问 我 们 的 
网 站 ， 为 他 们 提供 一 种 不 需要 网 络 连接 仍 可 访问 网 站 内 容 的 途径 如 何 ?” HTMLS 的 离线 
Web 应 用 特性 将 其 变 成 了 可 能 。 
这 个 功能 很 明显 是 用 于 Web 应 用 的 ( 真 够 搞笑 的 ， 不 知道 他 们 对 这 个 名 字 是 怎么 想 的 )。 
假设 有 一 个 在 线 笔记 应 用 ， 当 用 户 的 手机 网 络 断 开 时 ， 他 可 能 正在 编辑 一 则 笔记 。 使 用 
HTMLS 的 离线 Web 应 用 , 他 就 可 以 继续 离线 编辑 笔记 , 然后 等 到 网 络 再 次 连接 时 将 本 地 
数据 发 送 到 服务 器 。 

HTML5 离线 Web 应 用 的 最 美妙 之 处 在 于 它 的 设置 和 使 用 都 超级 简单 。 接 下 来 , 我 们 将 使 
用 这 项 技术 一 一 为 我 们 的 网 站 创建 一 个 离线 版 本 。 这 意味 着 如 果 用 户 想 在 没有 网 络 的 情 
况 下 访问 我 们 的 网 站 ， 他 也 能 做 到 1! 


















































4.10.1 ”离线 Web 应 用 概述 


离线 Web 应 用 的 运行 机 制 是 每 个 需要 离线 使 用 的 网 页 都 指定 一 个 后 级 名 为 . mani f est 的 
文本 文件 。 这 个 文本 文件 罗列 了 该 网 页 离线 使 用 时 所 需 的 所 有 资源 文件 (HTML、 图 片 
JavaScript 等 等 ), 支持 离线 Web 应 用 的 浏览 需 会 自动 读 取 , manifest 文件 , 下 载 文件 中 
所 罗列 的 资源 文件 ， 并 将 其 缓存 在 本 地 以 备 网 络 断 开 时 使 用 。 简 单 吧 ? 那 我 们 来 动手 试 
一 试 sese 





4.10.2. ”让 网 页 可 离线 使 用 


在 HTML 的 开始 标签 中 ， 我 们 指定 一 个 .manifest 文件 : 


<html langz'en" manifest="/offline. manifest" 


该 文件 的 文件 名 随意 ， 但 后 缀 名 建议 使 用 , manifesto 


I 
Q 你 必须 在 每 一 个 准备 离线 使 用 的 页 面 的 HTML 标 签 中 都 追加 mani f est = 
"Loffline.manifest" 属性。 


如 果 使 用 的 是 Apache 服务 器 ， 你 可 能 还 需要 修改 一 下 , htaccess 文件 ， 追 加 一 行 代码 : 


AddType text/cache- manifest .manifest 
这 样 就 保证 了 , mani f est 文件 拥有 正确 的 MIME 类 型 ， 即 text/cache-manifest。 
fr. htaccess 文件 中 还 可 以 加 入 以 下 代码 : 


图 灵 社 区 会 员 lemoggy(lemoggy@foxmail.com) FF 尊重 版 权 


100 第 4 章 响应 式 设 计 中 的 HTMLS 





«Files offline.manifest» 

ExpiresActive On 

ExpiresDefault "access" 
«Files» 
添加 上 面 这 几 行 代码 , 可 以 阻止 浏览 器 缓存 缓存 文件 。 你 没 看 错 。 因为 of fline., manifest 
是 一 个 静态 文件 , 浏览 器 默认 就 会 缓存 of fli ne, manifest 文件 。 所 以 上 面 这 几 行 代码 
就 是 让 服务 器 告诉 浏览 器 不 要 这 么 干 ! 
现在 我 们 需要 给 off li ne, manifest 填充 内 容 。 即 通知 浏览 器 那些 文件 是 用 作 离 线 存储 
的 。And the winner isnt... 网 站 的 of f li ne. manifest 文件 内 容 如 下 : 


CACHE MANIFEST 
#v1 


















































CACHE: 

basic page layout ch4. htm 
css|[ mai n.css 

i mg/ at wi NavBg. png 

i mg/ ki ngHong. j pg 

i mg/ mi dni ghtRun.j pg 

i mg/ moul i nRouge.j pg 

i mg/ oscar.png 

i mg/ wyattEarp.j pg 

img/ bunti ngSlice3l nvert.png 
i mg/ bunti ngSlice3. png 








ETWORK: 


* 


FALLBACK: 
l/loffline.html 


4.10.3 ”理解 manifest 文件 


manifest 文件 必须 以 CACHE MANIFEST 开头 。 第 二 行 就 是 一 句 注释 ， 注 明了 manifest X 
件 的 版 本 号 。 这 人 名 注释 的 用 途 稍 后 详细 介绍 。 

CACHE: 部 分 罗列 了 所 有 离线 使 用 所 需 的 文件 。 这 些 文件 的 路 径 都 是 相对 offline, manifest 
而 言 的 ， 所 以 文件 路 径 可 能 需要 根据 情况 稍 作 修改 。 使 用 绝对 路 径 也 是 可 以 的 。 


NETWORK: 部 分 罗列 了 所 有 不 需要 被 缓存 的 文件 。 你 可 以 将 其 看 成 是 一 个 “在 线 白 名 单 ”。 
此 处 罗列 的 文件 在 网 络 畅通 的 情况 下 都 会 直接 跳 过 缓存 。 如 果 你 想 网 站 内 容 在 网 络 畅 通 
的 情况 下 及 时 更 新 ( 而 不 是 仅 在 离线 缓存 中 查找 )， 可 以 在 此 处 使 用 *。 星 号 被 称 为 在 线 
白 名 单 通配符 。 

FALLBACK: 部 分 使 用 /字符 定义 了 一 个 URL 模板 。 它 的 作用 是 访问 每 个 页 面 时 都 会 问 “ 缓 存 
中 有 这 个 页 面 吗 ? ”, 如 果 有 则 显示 缓存 页 面 , 如 果 没 有 则 显示 指定 的 offline, ht ml 文件 。 
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4.10.4 页 面 被 自动 加 载 到 离线 缓存 


根据 实际 情况 , 还 有 一 种 更 简单 的 办 法 来 设置 offline,. manifest 文件 。 任 何 指定 了 离 
线 manifest 文件 的 页 面 ( 就 是 在 标签 中 追加 了 mani fest ="/offline,manifest'" 的 页 
面 ) 在 被 用 户 访 问 时 都 会 被 自动 加 入 到 本 地 缓存 。 浏 览 絮 会 缓存 用 户 访 问 过 的 每 一 个 网 
页 以 确保 这 些 网 页 在 离线 状态 下 仍 可 访问 。 简 化 的 manifest 文件 如 下 : 


CACHE MANIFEST 

# Cache Manifest v1 
FALLBACK: 
lloffline.html 
NETWORK: 

* 


选择 使 用 这 个 方法 时 有 一 点 需要 注意 ,这 种 方法 只 会 下 载 和 缓存 用 户 访问 的 HTML 页 面 ， 
不 会 缓存 页 面 内 引入 的 图 片 、 JavaScript 或 者 其 他 资源 文件 。 如 果 这 些 资 源 文件 是 必需 的 ， 
那么 请 按照 上 节 中 的 方法 在 CACHE: 部 分 专门 声明 这 类 文件 。 





4.10.5 ”版 本 注释 的 用 途 


对 网 站 内 容 或 任何 资源 文件 做 了 修改 之 后 , 你 必须 得 对 of fli ne. manifest 文件 也 做 点 
修改 并 将 其 重新 上 传 服务 器 。 这 样 就 能 让 服务 器 为 浏览 器 提供 新 版 本 文件 ， 而 浏览 器 则 
会 下 载 该 新 版 本 文件 并 再 次 触发 离线 存储 进程 。 我 效仿 了 Mark Pilgrim 的 例子 (来 自 著 
名 的 《畅游 HTMLS) 一 书 ), Æoffline. manifest 文件 的 头 部 加 了 一 名 注释 ， 每 次 
修改 网 站 都 会 对 应 地 修改 该 版 本 号 : ” 

* Cache Manifest vl 








4.10.6 ”离线 访问 网 站 


现在 来 测试 一 下 我 们 的 作品 。 在 支持 离线 Web 应 用 的 浏览 器 中 访问 网 页 。 一 些 浏览 器 会 
提示 该 网 页 使 用 了 离线 模式 并 在 本 地 保存 数据 ( 例如 Firefox， 注 意 看 下 面 截图 中 项 部 的 
通知 栏 )，Chrome 则 不 会 提示 : 











Q@ 作 者 此 处 说 得 不 是 很 清楚 。 补 充 一 下 : 如 果 开 发 者 对 网 站 内 容 或 资源 做 了 修改 ,那么 也 得 通知 浏览 器 更 新 缓存 文 
件 ， 否 则 浏览 器 仍然 会 使 用 之 前 已 有 的 缓存 文件 。 而 通知 浏览 器 更 新 缓存 文件 的 方式 通常 是 更 新 manifest 文件 ， 
浏览 器 如 果 发 现 manifest 文 件 发 生 了 变化 ， 就 会 更 新 缓存 文件 。 大 多 数 情况 下 manifest 中 的 缓存 文件 清单 不 会 发 

生变 化 ， 那 我 们 就 通过 修改 注释 的 方式 来 改变 manifest 文件 ， 注 释 中 的 版 本 号 ， 既 能 触发 文件 变化 ， 又 能 指明 当 

前 版 本 , 一举两得。 其 实 注释 中 还 可 以 加 入 更 新 时 间 等 更 详细 信息 ， 有 助 于 维护 。 文 中 提 到 的 《畅游 HTML5》， 

参见 http://diveintohtml5.com/。 一 一 译 者 注 
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AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS  VIDEOS/CLIPS QUOTES QUIZ 














接着 , REWER (或 者 关闭 WiFi 一 一 这 个 没有 “ 拔 掉 网 线 ” 听 着 霸气 ) 然后 刷新 浏览 需 。 
网 页 应 该 会 和 联网 状态 下 一 样 刷新 显示 一 一 其 实 我 们 没 联 网 。 








4.10.7 ”离线 Web 应 用 的 故障 诊断 


当 网 站 在 离线 状态 下 出 现 问题 导致 无 法 正常 运行 时 ， 我 一 般 都 使 用 Chrome 来 做 故障 诊 
Ero Chrome 内 置 的 开发 人 员工 具有 一 个 非常 好 用 的 Console 控制 台 (点 击 地 址 栏 右 侧 的 
扳手 图 标 ， 然 后 找到 工具 | 开发 者 工具 ， 之 后 切换 到 Console 面板 ; 或 者 直接 按 F12 )， 

从 中 可 以 看 出 哪些 文件 缓存 成 功 ， 那 些 缓存 失败 ， 以 及 你 做 错 了 什么 。 以 我 的 经 验 ， 通 


A 


常 是 文件 路 径 出 现 问 题 ， 例 如 缓存 页 面相 对 于 manifest 文件 的 路 径 不 正确 。 
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AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS  VIDEOS/CLIPS QUOTES QUIZ 


Unsunj 


y ! EVERY YEAR WHEN | 
fg WATCH THE OSCARS 
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4.11 


离线 Web 应 用 的 完整 规范 ， 请 见 如 下 网 址 : 
http://dev.w3.0org/html 5/spec/Overview. html #0offline 


小 结 


这 一 章 讲 了 很 多 内 容 。 从 最 基本 的 使 用 HTML5 制作 页 面 , 到 确保 用 户 断 网 时 仍 可 访问 网 
页 的 离线 应 用 技术 。 我 们 还 学 习 了 在 标签 中 能 入 富 媒体 〈 视 频 ) 以 及 如 何 确保 它 在 不 同 
视 口中 可 响应 ， 学 习 了 如 何 编写 更 富 语义 的 代码 ， 以 及 如 何 帮助 那些 依赖 辅助 技术 的 用 
户 一 一 尽管 这 些 技术 并 不 只 适用 于 响应 式 设计 。 不 过 我 们 的 网 站 仍然 有 一 些 明显 的 缺陷 。 
ZRK, Pip NES 文字 没有 样式 ， 页 面 元 素 缺 少 细节 ， 对 照 一 下 设计 图 中 
的 按钮 效果 就 知道 了 。 我 们 不 会 用 传统 的 加 载 图 片 方式 来 解决 这 些 问 题 ， 理 由 是 我 们 不 
需要 图 片 ! 在 下 一 章 , 我 们 将 会 使 用 强大 而 灵活 的 CSS3 来 制作 更 加 快速 和 更 易 维护 的 响 
应 式 设计 。 
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CSS3: 选择 器 、 字 体 和 


字 
颜色 模 陈 


NK 4 





第 1 章 我 们 提 到 过 ， 通 过 移动 通信 网 络 来 浏览 网 页 的 人 越 来 越 多 。 当 前 电信 网 络 的 速度 
差异 很 大 ， 所 以 我 们 需要 考虑 带宽 限制 和 网 站 的 加 载 时 间 。 这 就 像 回 到 了 当年 使 用 56K 
调制 解 调 器 的 时 代 , 不 得 不 考虑 页 面 及 其 中 包含 的 图 片 和 多 媒体 文件 需要 加 载 多 长 时 间 。 
现在 ， 我 们 得 面 对 与 之 类 似 的 加 载 时 间 问 题 。 正 如 表格 布局 技术 中 的 百分比 规则 重新 流 
行 一 样 ， 现 在 有 必要 重新 检查 搬入 页 面 中 的 每 一 个 媒体 片段 和 耗费 带宽 的 内 容 。 尽 管 我 
们 的 设备 已 普遍 移动 化 ， 但 下 载 内 容 的 速度 和 下 载 所 产生 的 费用 (速度 和 费用 ) 仍 和 几 
年 前 类 似 。 但 如 今 旧 貌 却 换 了 新 颜 ! CSS3 可 以 大 幅 减少 视觉 效果 对 图 片 的 依赖 ， 为 我 们 
制作 可 在 极 短 时 间 内 加 载 的 漂亮 网 站 提供 了 有 力 工 具 。CSS3 有 很 多 内 容 要 讲 。 第 6 章 会 
讲解 更 多 CSS3 技巧 , 包括 文字 阴影 、 盒 阴影 、 渐 变 和 背景 图 片 ; 同时 第 7 章 会 学 习 CSS3 
动画 、 变 形 和 转换 。 

本 章 内 容 

Q CSS3 给 前 端 开 发 人 员 带 来 了 什么 

a 快速 而 便捷 的 CSS3 技巧 ( 多 列 布局 和 文字 换行 ) 

口 CSS 规则 解析 

口 私有 前 级 的 来 源 和 用 法 

口 新 的 CSS3 选择 器 的 工作 原理 

口 使 用 af ont - face 设 定 字 体 

口 如 何 使 用 带 有 透明 度 的 RGB 和 HSL 颜色 模式 
























































CSS3 给 前 端 开发 人 员 带 来 了 什么 


过 去 , 我 们 要 么 押 注 用 户 愿意 为 优雅 漂亮 的 设计 多 等 点 时 间 (顺便 说 一 句 ， 用 户 不 愿意 )， 
要 么 为 了 可 用 性 而 抛弃 图 片 ， 牺 牲 设 计 理 念 。CSS3 让 我 们 可 以 在 很 多 方面 不 必 再 妥协 和 
牺牲 。 仅 需要 几 行 代码 ( 而 且 不 用 图 片 ) CSS3 就 可 以 创造 出 各 种 效果 : 圆 角 、 背 景 渐变 、 
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5.2 


文字 阴影 、 盒 阴影 、 自 定义 字体 以 及 多 重 背景 图 片 〈 当然 ， 这 个 效果 确实 需要 图 片 )。 如 
果 这 还 不 够 神奇 ， 甚 至 我 们 之 前 需要 依赖 JavaScript 的 一 些 基 本 交互 效果 如 悬 停 动 画 ， 也 
可 以 使 用 纯 CSS3 来 实现 。CSS3 所 列 含 的 海量 利好 及 精简 之 道 ， 可 以 让 我 们 将 响应 式 设 
计 从 “一 个 普通 的 可 响应 网 站 ”提升 为 一 个 面向 未 来 的 真正 响应 式 网 站 。 使 用 CSS3 之 后 ， 
可 以 让 响应 式 设计 加 载 更 快 ， 所 需 资 源 更 少 , 且 在 将 来 更 容易 维护 和 修改 。 在 进入 正题 之 
前 ,我 们 先 来 解决 一 个 琼 手 的 问题 。 

















Internet Explorer 6 到 8 对 CSS3 的 支持 


除 少 数 例外 ( 如 @f ont -face )， 老 版 本 的 正 (E6, 7, 8) 几乎 不 支持 CSS3 的 新 特性 。 
那么 我 们 可 以 在 设计 开发 中 使 用 CSS3 吗 ? 和 以 前 一 样 ， 答 案 依 然 是 :“ 看 情况 。” 

就 我 个 人 而 言 , 目前 我 主要 将 CSS3 用 作 增 强 网 站 , 而 不 是 用 它 提 供 基本 功能 。 dpt 
欢 页 面 元 素 在 不 同 的 浏览 器 中 看 起 来 有 点 差异 ， 相 信 你 和 你 的 客户 也 是 这 样 。 你 会 发 现 
回顾 一 下 1.11 节 “ 引 导 客 户 : 网 站 不 必 在 所 有 浏览 器 中 表现 一 致 ”会 很 有 帮助 。 评 价 网 
站 某 部 分 “可 行 ”或 “看 上 去 不 错 ” 是 很 主观 的 。 但 是 你 得 知道 有 很 多 腻子 脚本 C polyfill ) 
可 以 为 老 版 本 下 增加 CSS3 功能 。 想 要 应 用 这 些 腻子 脚本 , 应 该 详细 参阅 第 9 章 的 内 容 。 








各 版 本 Internet Explorer 对 CSS 2.1 和 CSS3 特性 的 支持 情况 ， 请 见 如 下 
网 址 : http://msdn.microsoft.com/en-us/library/cc3510249628v-vs.859629.aspx 
(或 http://tinyurl.com/495756c )。 





使 用 CSS3 设计 和 开发 页 面 


我 不 能 替 你 说 话 ， 但 我 确实 发 现 重 做 图 片 很 病人 。 你 知道 我 说 的 就 是 这 些 意见 “能 
不 能 让 圆 角 再 平滑 点 ? ”或 者 “渐变 的 顶部 颜色 能 不 能 再 深 点 ?” 一 旦 我 们 老 老 实 实地 
做 了 修改 ， 则 不 可 避免 的 会 听 到 :“ 噢 ， 算 了 ,刚才 那样 挺 好 。 你 能 改 回去 吗 ?” ”现在 当 
然 可 以 ， 这 种 来 来 回回 的 过 程 不 可 避免 ; 毕 竞 我 们 常常 只 想 改 改 设计 看 看 效果 。CSS3 可 
以 让 你 使 用 代码 在 几 秘 钟 之 内 搞定 这 些 ， 而 不 用 在 图 片 编辑 器 里 花费 好 几 分 钟 。 


















































CSS 规则 解析 


在 探索 CSS3 带 给 我 们 的 新 特性 之 前 ， 为 避免 混淆 ， 我 们 先 来 定义 一 下 用 来 描述 CSS 规 
则 的 一 些 术 语 。 看 看 如 下 的 例子 : 
.round { 


border-radius: 10px; 
} 
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5.3 





这 条 规则 由 选择 髓 (, round ) 和 声明 (border-radius: 10px; ) 组成。 而 声明 则 由 属 
Æ (border-radius: ) AMÈ (10px; ) 组 成 。 我 们 的 说 法 一 致 吧 ? 很 好 ， 继 续 。 


par a 





私有 前 缀 及 其 用 法 
在 CSS3 模块 标准 尚未 被 W3C 批准 或 者 标准 所 提议 的 特性 尚未 被 浏览 器 完全 实现 时 ， 浏 
览 絮 厂商 会 使 用 所 谓 的 私有 前 缀 来 测试 “试验 性 的 ”CSS 特性 。 这 样 ， 浏 览 器 设计 者 实 
现 了 CSS3 的 新 模块 ， 但 对 使 用 CSS3 的 开发 者 来 说 则 很 繁琐 。 看 看 CSS3 中 实现 圆 角 的 
代码 : 
.round{ 

-khtml-border-radius: 10px; /* Konqueror */ 

-rim-border-radius: 10px; /* RIM */ 

-ms-border-radius: 10px; /* Microsoft */ 

-0-border-radius: 10px; /* Opera */ 

-moz-border-radius: 10px; /* Mozilla (Firefox) */ 

-webkit-border-radius: 10px; /* Webkit (如 Safari Æ Chrome) */ 

border-radius: 10px; /* W3C */ 
} 
你 可 以 看 到 一 组 私有 前 级 属性 ( 这 个 列表 还 不 是 很 全 面 ), 每 一 个 都 有 其 独 有 的 前 级 字符 
串 , 如 - webkit- 是 针对 Webkit 核心 浏览 器 ,- ms - 是 微软 的 私有 前 缀 所 以 针对 的 是 Internet 
Explorer， 等 等 。CSS 的 工作 方式 是 浏览 器 逐 行 下 载 样式 表 ， 应 用 其 可 识别 的 属性 ， 忽 略 
其 无 法 识别 的 属性 。 
此 外 ， 样 式 表 中 后 出 现 的 属性 优先 级 高 于 之 前 出 现 的 同名 属性 。 正 是 由 于 这 种 层 炙 ,我 
们 就 可 以 先 列 出 私有 前 缀 属性， 最 后 使 用 无 前 级 的 属性 来 修正 ， 以 确保 当 该 特性 被 完全 
实现 时 ， 浏 览 器 会 运行 正确 的 效果 ， 而 不 是 之 前 的 特定 浏览 右 的 试验 性 效果 。 





















































m 
































可 快速 编辑 CSS3 前 组 的 代码 片段 和 JavaScript 方案 
建立 包含 所 有 必需 的 私有 前 缓 属性 的 代码 片段 会 带 来 极 大 便利 。 这 样 你 
Q 就 可 以 直接 粘贴 代码 而 不 用 每 次 都 重新 输入 。 很 多 代码 编辑 程序 ( 或 者 
集成 开发 环境 ) 带 有 代码 片段 功能 , 这样 在 开发 CSS3 时 能 节省 很 多 时 间 。 
也 有 可 以 为 CSS 文件 自动 追加 前 组 的 JavaScript 方案 ,比如 “-prefix-free”， 
很 不 错 的 解决 方案 ， 网 址 是 http://leaverou.github.com/prefixfree/。 


挨个 列 出 每 一 种 私有 前 缀 是 最 理想 的 做 法 ， 但 实际 开发 中 很 少 有 人 那样 做 。 相 反 ， 他 们 
要 么 只 指定 自己 期 望 的 浏览 器 , 要 么 在 编写 规则 之 前 已 经 检查 过 哪些 浏览 器 支持 该 特性 。 
例如 ， 你 可 以 仅 写 如 下 代码 : 


.Tound{ 
-moz-border-radius: 10px; /* Mozilla (e.g Firefox) */ 
-webkit-border-radius: 10px; /* Webkit (e.g. Safari and Chrome) */ 
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border-radius: 10px; /* W3C */ 
} 


这 样 写 会 覆盖 Firefox, Chrome 和 Safari, URIE E 2856 4 39. T 32090 9] B D] EAF o 
我 知道 你 在 想 什 么 ， 对 同一 个 属性 写 多 个 私有 前 绥 声 明 是 否 会 造成 代码 腑 肿 ?” 确实 会 有 
那么 一 点 。 但 无 论 追 加 多 少 前 缀 属性 ， 相 对 于 图 片 而 言 ， 这 仍然 是 一 个 更 加 快速 、 优 雅 
且 健壮 的 解决 方案 。 

在 讨论 网 站 应 用 之 前 ， 最 好 先 看 看 当前 浏览 器 使 用 率 的 分 布 情况 。 这 样 做 会 让 我 们 对 文 
持 哪 些 浏览 絮 更 胸有成竹 。 例 如 ， 如 果 时 间 和 预算 都 很 紧张 ， 你 可 能 会 决定 不 对 任何 在 
你 的 网 站 上 使 用 率 小 于 3% 的 浏览 器 提供 私有 前 级 支持 。 此 时 你 需要 根据 一 组 数据 来 做 
判断 。 

现在 我 们 知道 了 前 级 的 来 源 ， 以 及 如 何在 规则 中 应 用 它 。 接 下 来 我 们 看 一 些 快 速 而 有 效 
的 CSS3 技 巧 。 


什么 时 候 可 以 使 用 特定 的 CSS3 和 HTML5 特性 ? 


























When can I use... 
Compatibility tables for support of HTMLS, CSS3, SVG and more in desktop and mobile browsers. 1 CD 


Suggestions E feed t Twitter 852 ns E 
a 
A 


Latest update: (£10 Platform Preview J released (september 14, 2011) 


Ads by Googie Browsers HIM C33 Deshaco Sunon HIMLS Encoding. 
Search: 
[ medial | 
1 result found 
index) 国 一 fra] ems mie 
SS] oo 
> Show options 
= Supported = Mot supported = Partially supported = Support unknown 
I à A Global user stats": 
RO CSS3 Media Queries - canditate Recommendation "p 
Method of applying styles based on media information. Includes things like page and device dimensions Partial support 0.03% 
T 63.12% 
Resources: 1E gemo ovoe with information Demo pooe foc page width um 
Show all versions IE Firefox Safari Chrome o Hii 1 — 
3versionsbok — 6.0 3.6 32 10.0 10.6 
?vesionsbak — 7.0 4.0 4.0 11.0 11.0 3.2 10.0 21 
Previous version — B.O 5.0 5.0 12.0 11.1 4.0-4.1 110 22 
Current. 0:0 6.0 s1 13.0 11.5 4.2-4.3 5.0-6.0 11.1 23 30 
Near future s 7.0 s 14.0 12.0 
Farther future. 10.0 8.0 6.0 15.0 12.1 
Note: Incomplete support by older webkit browsers refers to only acknowledging different media rules on page reload | rectae. | 





随 着 对 CSS3 研究 的 不 断 深 入 ， 我 衷心 建议 大 家 去 看 看 这 个 网 站 http:// 
caniuse.com， 在 这 里 你 可 以 知道 当前 浏览 器 对 特定 CSS3 fe HTMLS 特性 的 
支持 程度 。 除 了 显示 浏览 器 的 特性 支持 情况 之 外 ( 可 按 特性 搜索 )， 它 还 提 
供 了 来 自 于 http://gs.statcounter.com 的 最 近 的 全 球 浏览 器 使 用 率 统 计 。 
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5.4 


5.4.1 


快速 而 有 效 的 CSS 技巧 


在 我 的 日 常 工作 中 , 有 一 些 CSS3 新 特性 会 被 经 常 使 用 , 还 有 一 些 则 基本 不 用 。 在 开始 元 
长 的 讲解 之 前 , 我 想 先 给 大 家 分 享 几 个 能 让 工作 更 轻松 的 CSS3 小 技巧 , 尤其 是 响应 式 设 
计 方 面 的 ， 用 它们 可 以 完成 以 前 会 让 人 头疼 的 简单 任务 。 


CSS3 多 栏 布局 


曾经 有 需要 将 一 整 段 文本 显示 在 多 个 栏 位 中 ?在 CSS3 出 现 之 前 ,你 必须 将 内 容 拆 分 到 不 
同 的 标签 中 ， 然 后 分 别 设 定 样式 。 因 为 样式 原因 而 修改 标签 永远 不 是 什么 好 做 法 。CSS3 
可 以 让 我 们 将 一 段 或 多 段 内 容 分 布 到 多 列 网 格 中 。 请 看 如 下 代码 : 


«div id=' main' rolez'main'» 
<p>lloremipsimLoremipsum dolor sit amet, consectetur 
I| 任意 文字 || 

«| p» 
«p»lloremipsi mLoremi psum dolor sit amet, consectetur 
I| 任意 文字 || 

<| p» 

«[ di v» 


你 可 以 通过 设 定 具体 栏 位 宽度 Clil 12em) 或 者 栏 位 数量 ( 如 3 ) 来 使 内 容 分 布 在 多 列 网 
格 中 ， 做 法 如 下 。 
如 果 设 定 栏 位 宽度 ,语法 如 下 所 示 ( 注意 ， 为 简洁 起 见 代码 中 省 略 了 私有 前 级 ): 


#main { 
column-width: 12em; 





} 


按照 上 述 的 设 定 , 无 论 视 口 尺寸 是 多 少 ， 内 容 都 会 分 布 在 宽度 为 12em 的 栏 位 中 。 视 口 尺 
寸 发 生变 化 之 后 ， 浏 览 器 会 自动 调整 栏 位 数量 。 


如 在 视 口 宽度 1024 像素 的 Safari 浏览 器 中 效果 如 下 : 





4 im # 2 + hey JUsers benfrain/Sites/BRI -CIT columns html e Nous. 
alnm) [maumem ) [ 507329 ) [sooner || soto ] | 102x765 ] reference 





lorem ipsimLorem ipsum dolorsit Duis aute irure dolor in sepeehenderit — Dorem ipsimLorem ipsum dolorsit Duis aute irur dolor in reprebenderit 
amet, consectetur adipisicing elit,sed in voluptate velit esse cillum dolore amet, consectetur adipisicing cht, sed in voluptate velit esse cillum dolore. 
do ciusmod tempor incididunt ut cu fugiat nulla pariatur. Excepteur simt do ciusmod tempor incididunt ut cu fugiat nulla pariatur. Exceptcur sint 


labore ct dolorc magna aliqua. Ut Occaccat cupidatat non proident, sunt — labore ct dolore magna aliqua. Ut occaccat cupidamt non proident, sunt 
enim ad minim veniam,quis nostrud in culpa qui officia deserunt mollit enim ad minim veniam, quis nostrud — in culpa qui afficia deserunt mollit 
exercitation ullamco laboris nisi ut anim id ext laborum.Lorem ipsum exercitation ullamco laboris nisi ut anim id cst laborum.Lorem ipsum 


aliquip ex ca commodo consequat. dolor sit amet, consectetur adipisicing aliquip ex ca commodo consequat. dolor sit amet, consectetur adipisicing 
Duis aste iure dolorinreprehendent — elt sed do eiusmod temporincididunt Duis aute iure dolor in reprehendent — elit, sed dà eiusmod tempor incididunt 
in voluptate velitesse clum dolore ut labore et dolore magna aliqua. Ut in voluptate velitesse cillum dolore ut labore et dolore magna aliqua. Ut 
eu fugiat pulla parixtur. Excepteur sint enim ad minim veniam, quis nostrud cu fugiat nulla pariatur. Excepteur sint enim ad minim veniam, quis nostrod 
occaecat cupidatat non proident, sunt exercitation ullamco laboris nisi ut occaecatcupidatst non proident, sunt exercitation ullamco laboris nisi ut 

in culpa qui officia deserunt moll aliquip cx ca commodo consequat. in culpa qui officia deserunt mollt aliquip ex ca commodo consequat. 
anim id est laborum Lowm ipsum Duis aute irure dolor in reprehenderit anim x cx laborum.Lorem ipsum Duis aute irur dolor in reprebenderit. 
dolor sst amet, consectetur adipissing m voluptate velit esse cillum doloe dolor sit amet, consectetur adipisscing in voluptate vebt csse cillum dolore. 
elit, sed do eiusmod tempor incididunt eu fugiat nulla paríamur. Excepteur sint elir, sed do eiusmod tempor incididunt eu fugiat nulla pariatur. Excepteur sint 
ut labore et dolore magra aliqua. Ut occaecat cupidat non proident, sum wt labore et dolore magns aliqua. UT — occsecat cupidatat non proident, sant 
enim ad minim veniam,quis nosmud in culpa qui officia deserunt mollit enimad minim veniam, quis nosuud in culpa qui officia deserunt mollit 
exercitation ullamco laboris nisi ut anim id est laborum. exerciration uliamco laboris nisi ut anim id est laborum. 

aliquip ex ca commodo consequat. aliquip ex ca commodo consequat. 
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而 下 图 则 展示 了 相同 页 面 


只 需 极 少量 代码 就 能 
如 果 你 想 保 持 栏 位 数量 不 变 而 让 栏 位 


£main { 


col umn- count: 


4 (rn m e 


在 视 口 宽 度 为 768 像素 的 iPad. 上 的 显示 效果 : 





lorem ipsimLorem ipsum dolor sit 
amct, consectetur adipisicing clit, 
sed do ciusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
Duis aute irure dolor in 
reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id 
est laborum.Lorem ipsum dolor sit 
amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
Duis aute irure dolor in 
reprehenderit in voluptate velit cssc 
cillum dolore cu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id 
€st laborum.Lorem ipsum dolor sit 


4; 


增加 栏 位 间隙 和 分 割 线 
增加 栏 位 间隙 和 分 割 线 可 以 让 多 列 布局 的 效果 更 好 ， 代 码 如 下 : 


#main { 
col umn- gap: 
col umn-rul e: 


col umn- wi dth: 


效果 如 下 图 : 


图 灵 社 区 会 员 lemoggy(lemoggy@foxmail.com) FF 尊重 版 权 


2em; 
thin dotted 4999; 


l2em; 


amet, consectetur adipisicing clit, 
»cd do ciusmod tempor incididunt ut 
labore ct dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ca commodo consequat 
Duis aute irure dolor in 
reprehenderit in voluptate velit ese 
cillum dolore cu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa 
qui officia dexcrunt mollit anim id 
cst laborum. 


llorem ipsimLorem ipsum dolor sit 
amct, consectetur adipisicing clit, 
sed do ciusmod tempor incididunt ut 
labore ct dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
Duis aute irure dc in 
reprehenderit in voluptate velit esse 
cillum dolore cu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa 


qui officia deserunt mollit anim id 


完成 这 样 精美 的 响应 式 布局 一 一 我 喜欢 ! 
宽度 根据 视 口 自动 调整 ， 


est laborum.Lorem ipsum dolor sit 
amci, consectetur adipisicing clit, 
sed do ciusmod tempor incididunt ut 
labore ct dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ca commodo consequat. 
Duis aute irure dolor in 
reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla 

pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim 1d 
est laborum.Lorem ipsum dolor sit 
amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat 
Duis aute irure dolor in 
reprehenderit in voluptate velit ex 
cillum dolore cu fugiat nulla 
pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id 
est laborum. 





可 以 参考 如 下 代码 : 
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本 tc m. r 


Untitled 





iT 





lorem ipsimLorem ipsum dol 
amet, consectetur adipisicing elit 
sed do ciusmod tempor incididunt 
ut labore ct dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ca 
commodo consequat. Duis aute 
irure dolor in reprehenderit in 
voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non 
proident, sunt in culpa qui officia 
deserunt mollit anim id est 
laborum.Lorem ipsum dolor sit 
amet, consecttur adipisicing elit, 
scd do ciusmod tempor incididunt 
ut labore ct dolorc magna aliqua 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ca 
commodo conscquat Duis autc 
irure dolor in reprehenderit in 
voluptate velit esse cillum dol 

eu fugiat nulla pariatur. Excepteur 
sint occaccat cupidatat non 
proident, sunt in culpa qui officia. 
deserunt mollit anim id est 


laborum.Lorem ipsum dolor sit 


amet, consectetur a icing elit 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua 

Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ul aliquip ex ea 
commodo consequat. Duis aute 
irure dolor in reprehenderit in 
voluptate velit cssc cillum dolore 
eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non 
proident, sunt in culpa qui officia 
deserunt mollit anim id cst 


laborum 


llorcm ipsimLorem ipsum dolor sit 
amet, consectetur adipisicing elit 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua 

Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 

commodo consequat. Duis aute 
irure dolor in reprehenderit in 
voluptate velit cssc cillum dolorc 
eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non 
proident, sunt in culpa qui officia 
deserunt mollit anim id cst 


laborum.Lorem ipsum dolor sit 
amet, consectetur adipisicing elit 
sed do eiusmod tempor incididunt 
ut labore ct dolorc magna aliqua. 
Ut cnim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ca 
commodo consequat. Duis aute 
irure dolor in reprehenderit in 
voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Fxcepteur 
sint occaecat cupidatat non 
proident, sunt in culpa qui officia 
deserunt mollit anim id e 
laborum.Lorem ipsum dolor sit 
amet, consectetur adipisicing elit, 
sed do ciusmod tempor incididunt 
ut labore ct dolorc magna aliqua. 

Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ca 
commodo consequat, Duis aute 
irure dolor in reprehenderit in 
voluptate velit esse cillum dolore 
cu fugiat nulla pariatur. Excepteur 
sint occaccat cupidatat non 
proident, sunt in culpa qui officia 
deserunt mollit anim id est 


laborum. 





若 想 参 阅 CSS3 多 列 布局 模块 的 标准 ， 请 访问 httpJ//www.w3.org/TR/css3-multicol/; 
目前 ， 请 切记 你 需要 给 多 列 布局 声明 使 用 私有 前 级 ， 以 确保 兼容 最 广泛 的 浏览 器 。 


5.4.2 ”文字 换行 


有 多 少 次 你 必须 得 将 一 个 很 长 的 URL 地 址 放置 在 一 个 狭小 的 空间 内 ? 结果 很 让 你 扫兴 
"E? 请 看 下 面 截 图 中 的 问题 ， 注 意 页 面 右 下 角 的 URL 地 址 已 经 超出 了 它 的 范围 : 





era denion Cheshire Corl [F 








Photoshop/Fireworks to providing my front-end 
HTMLS, CSS3 and jQuery skills to design 
agencles In the Cheshire, Manchester and 
Birmingham area. 


I Semantic HTML5 & CSS3 code 


1 build websites using W3C valid and 
code; t 

code. By designing and building websites that. 

validate to international standards your website 





international standards of web 


is guaranteed to work in all major web browsing 
platforms; everything from smart phones to 
desktops. Building web sites with standards. 
compliant code also means the littie web robots 





from can properly understand the content 
of your web site and rank it accordingly. 


Yy Ecommerce 


T've built numerous e-commerce websites. Im 
confident I can tallor a solution to suit your 
needs. Whether it's merely a way of selling one 
or two items online or processing thousands of 
transactions a day, chances are, 1 have bullt 





LZ Browser Compatibility 


1 ensure that your website will be compatible. 
with all major, standards compliant, Intornet. 
browsers. My emphasis is on supporting the 
Growing number of smart phone users ( 
). Like it or not. 
they are the future! 


前 Search Engine Optimisation 


Want to be top of ? Unlike 






Hes black. 
magic spouted by many SEO strategists, the only 
reliable way to get up the rankings is to produce 
readable, semantically coded and useful content 
for users - and thon enjoy bigger and busier 
websites linking to it. Stuffing your site full of 

is a technique of the dark ages. 
Instead, by working with you to make your 
website cantent as appealing and useful as 
possible and then submitting it to the major. 
search engines your website WILL be found and. 


the content ranked accordingly. 


lil. How sites I've built rank.. 


















Like Welght Watchers (other diets are avatlable) 
for web code. This keeps your site a mean, lean, 
Information serving machine. 


DO Technology experience 


Tve got a broad experience base, having worked 


on everything fro: 





single page websites to fully 


bespoke e-commerce systems based on Magento, 


Cubecart and Opencart. I've also produced 


articles covering CSS and HTML for magazines 
like. and 


Hore's a list of my core experience aroas- 


* Photoshop PSD to X)HTML & CSS 
conversion 

* W3C Web standards and content semantics. 

* "Mobile first: responsive dosigns 





iPhone, IPad and Desktop designs 
E-commerce systems and PCI-D: 
compliance. 
* Cross browser compatiblllty 
enhancement/graceful 








* Content Management Systems 
* HTMLS, CSS3 and JQuery 
* Word Wrapping expertise 





http-//www.thisisalinkthatisfartoolongforthecontalningelemet 





«li 
PE 
Xl 
Ji» 
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CSS3 使 用 了 一 个 简单 的 声明 解决 了 这 个 问题 ， 凑 巧 的 是 老 版 本 IE 均 支 持 该 声明 ， 甚 至 
可 以 追溯 到 IE 5.5! 


word-wrap: break-word; 








2 ZI CRGA HE, PEARU P EB. REFRE LUER ERTA, 
超 长 的 URL 完美 换行 了 ! 









piatto 
desktops. 
compliant bots 


derstand the content 


ebsites. I'm 





slıl How sites I've built rank... 

















5.5 CSS3 的 新 增 选择 器 及 其 用 法 


CSS3 赋予 了 我 们 超级 强大 的 能 力 ， 用 以 选择 页 面 内 的 元 素 。 你 可 能 觉得 这 听 起 来 没什么 
好 激动 的 ， 但 相信 我 ， 这 种 能 力 会 让 你 的 工作 无 比 轻松 ， 你 会 因此 爱 上 CSS31 RE, 最 
好 还 是 让 事实 来 证 明 这 个 大 胆 的 预言 …… 














5.5.1 CSS3 属性 选择 器 


你 可 能 已 经 使 用 过 现 有 的 CSS 属性 选择 需 来 指定 规则 了 ， 如 下 代码 所 示 : 


img[alt] { 
border: 3px dashed fel5f5f; 
} 


这 个 选择 器 会 匹配 页 面 标签 中 任意 一 个 含有 alt 属性 的 图 片 标签 : 

















<img classz'oscarMain" src="img/oscar. png" altz'atwi oscar" /> 


还 可 以 通过 设 定 属性 值 来 缩小 匹配 范围 。 如 下 代码 所 示 : 




















图 灵 社 区 会 员 lemoggy(lemoggy@foxmail.com) 专 享 尊重 版 权 


112 54553 CSS3: 选择 器 、 字 体 和 颜色 模式 





img[altz'atwi oscar'] { 
border: 3px dashed £el5f5f; 
} 


这 样 就 仅 会 匹配 alt 属性 值 为 at wi oscar 的 图 片 。 刚 才 说 的 这 些 事 CSS2 都 能 搞定 。 
CSS3 给 我 们 带 来 了 什么 新 特性 ”其 实 就 是 三 种 “ 子 字符 串 匹配 ”的 属性 选择 回 。 
1. CSS3 的 子 字符 串 匹 配属 性 选择 器 
CSS3 可 以 让 我 们 基于 属性 选择 器 的 子 字 符 串 来 选择 元 素 。 听 起 来 有 点 复杂 ,实际 上 并 不 
深奥 。 换 句 话说， 现在 我 们 可 以 根据 属性 的 部 分 内 容 来 选择 元 素 。 三 种 匹配 模式 分 别 是 : 
口 以 特定 前 绥 开 头 ; 
口 包 含 特定 字符 串 ; 
口 以 特定 后 绥 结 尾 。 
我 们 来 看 看 具体 用 法 。 
(1)“ 匹 配 开 头 ” 的 属性 选择 器 。 
“匹配 开头 ”的 属性 选择 器 语法 如 下 : 
El ement[attribute^="value"] 
在 实际 使 用 中 ， 如 果 我 想 选择 网 站 中 所 有 alt 属性 值 以 fi Im 开头 的 图 片 ， 则 对 应 代码 
如 下 : 
img[alt^="film"] { 
border: 3px dashed #e15f5f; 
} 
该 选择 需 的 关键 字符 是 ^ 符 号 ， 它 的 意思 是 “以 此 开头 ”。 
(2)“ 匹 配 包含 内 容 ” 的 属性 选择 器 。 
“匹配 包含 内 容 ” 的 属性 选择 器 语法 如 下 : 
Element[attribute*z"val ue"] 
在 实际 使 用 中 ， 如 果 我 想 选 择 网 站 中 所 有 alt 属性 值 中 包含 fi lm 字符 串 的 图 片 ， 则 对 
img[alt*z'film'] { 
border: 3px dashed #e15f5f; 
} 
该 选择 需 的 关键 字符 是 x 符号 ， 它 的 意思 是 “包含 ”。 
(3)“ 匹 配 结尾 ”的 属性 选择 器 。 
“匹配 结尾 ”的 属性 选择 器 语法 如 下 : 


Element[attribute$z"val ue"] 
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5.5.2 





在 实际 使 用 中 ， 如 果 我 想 选 择 网 站 中 所 有 alt 属性 值 以 fi1m 结尾 的 图 片 ， 则 对 应 代码 
如 下 : 
img[alt$z"film'] { 

border: 3px dashed #el5f5f,; 
} 
该 选择 需 的 关键 字符 是 $ ， 它 的 意思 是 “以 此 结尾 ”。 
2. 一 个 活生生 的 例子 
这 些 子 字符 串 属 性 选择 器 如 何在 实际 工作 中 发 挥 作用 呢 ? 举 一 个 我 经 常 使 用 的 CSS3 属 
性 选择 器 的 例子 。 假 设 我 使 用 内 容 管理 系统 ( 如 WordPress, Concrete 或 者 Magento ) 来 
制作 网 站 ， 那 网 站 肯定 有 让 用 户 添 加 新 页 面 的 功能 。 用 户 可 能 会 添加 一 些 有 关 他 们 公司 
或 新 产品 的 新 闻 。 他 每 在 内 容 管 理 系 统 中 添加 一 个 新 页 面 ， 生 成 的 HTML 代码 中 的 
<body > 或 相关 标签 就 会 包含 一 个 特定 的 ID 值 ， 用 以 标识 该 页 面 ， 以 便 和 其 他 页 面 区 分 
开 来 。 例 如 某 个 用 户 爱好 赛车 运动 并 在 网 站 上 维护 着 一 个 “赛事 年 历 ” 版 块 。 这 样 每 一 
个 <body > 标签 都 会 有 一 个 与 年 份 对 应 的 ID 值 : 
«body idz'2003'» 

















HTMLS5 中 的 ID 值 可 以 用 数字 开头 
M 如 果 你 还 不 习惯 HTML5， 可 能 会 认为 ID 值 以 数字 开头 是 无 效 的 ， 因 为 
Q HTML 4.01 是 这 样 规 定 的 。HTMLS 取消 了 这 个 限制 ，HTML 的 ID 命名 
方面 唯一 需要 记 住 的 是 名 字 中 间 不 能 有 空格 且 保证 在 页 面 中 唯一 。 详 细 
信息 请 参阅 http://dev.w3.org/html5/spec/Overview.html#the-id-attribute。 


我 想 让 指向 “赛事 年 历 ” 的 导航 栏 链 接 在 任意 一 个 赛车 年 度 页 面 时 均 被 高 亮 显 示 ， 以 表 
示 它 和 “赛车 年 历 ” 版 块 相关 。 我 肯定 不 会 写 一 个 覆盖 每 一 个 未 来 年 份 的 样式 规则 ， 而 
是 写 一 个 以 不 变 应 万 变 (也 可 以 说 是 防 串 于 未 然 ) 的 CSS3 规则 : 

body[id^z'2"] .navHistory { color: £00b4ff; } 


这 个 规则 表示 任意 含有 , navHi st ory 类 名 的 元 素 ， 只 要 它 被 包含 在 ID 值 以 ) 开头 的 
<body> 中 ， 则 其 文字 颜色 为 #00b4ff 。 一 个 简单 的 规则 覆盖 了 所 有 可 能 性 。 当 然 除非 这 
个 网 站 在 公元 3000 年 时 还 保持 目前 的 样子 一 一 那 时 ， 即 使 我 吃 嘛 嘛 香 身 体 倍 儿 棒 ， 估计 
也 老 得 没 法 继续 维护 该 网 站 了 。 








CSS3 结构 伪 类 


做 的 网 站 越 多 ， 越 会 发 现 自己 总 是 在 一 遍 遍 地 解决 同样 的 问题 。 我 举 个 典型 的 例子 : 水 
平 导航 栏 一 般 都 是 由 一 组 相同 间距 的 <| i > 链接 组 成 。 假 设 我 们 想 让 每 一 个 导航 链接 一 一 
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但 不 包括 第 一 个 和 最 后 一 个 ,左右 两 边 都 有 一 定 的 外 边 距 。 以 前 的 解决 办 法 是 给 第 一 个 
和 最 后 一 个 <| i > 元 素 上 分 别 追加 一 个 看 义 上 多 余 的 类 名 ， 如 下 面 代码 片段 中 加 粗 的 代码 
行 所 示 : 


«ul» 
<li classz'first"»«a hrefz's"»Wny?«/a»«lli» 
<li><a hrefz'£'»Synopsis«[/a»«[li» 
<li><a hrefz'£'»Stills[/Photos«/a»«[li» 
<li><a hrefz'£'»Videos/clips«[a»«[li» 
<li><a hrefz'£'»Quotes«/a»«[li» 
«li classz'last'»«a hrefz'£'»Quiz«/a»«[li» 
«lul» 


然后 在 CSS 中 追加 两 个 样式 ， 并 修改 针对 那 两 个 特殊 列表 项 的 外 边 距 值 : 


li (t 
margin-left: 595 
margin-right: 5%; 





} 
first 
margin-left: 0px; 


~ 


aai { 
margin-right: 0px; 

} 

这 样 是 能 解决 问题 ， 但 不 够 灵活 。 比 如 当 我 们 使 用 内 容 管理 系统 来 制作 网 站 时 ， 系 统 可 

能 会 自动 添加 新 的 导航 链接 ， 此 时 再 给 代码 中 的 列表 项 追加 或 删除 1ast 或 first 类 以 

保证 结构 正确 就 不 是 件 容 易 的 事 了 。 


. :last-child 选择 器 
CSS2.1 中 已 经 有 一 个 针对 列表 中 第 一 项 的 选择 需 ， 














li:first-child 
CSS3 又 增加 了 一 个 选择 器 用 以 匹配 最 后 一 项 : 
li:last-child 





组 合 使 用 这 两 个 选择 器 ， 就 不 需要 在 代码 中 增加 额外 的 类 名 了 。 


我 们 将 使 用 这 个 方法 ， 并 结合 di spl ay: table 属性 来 改进 And the winnerisnmt... 网 站 的 
导航 。 下 面 的 截图 展示 了 网 站 目前 的 样子 : 
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Q 对 四" 一 - 
1 And the winner hn't 


NVVVVVVVVYVVNVVNVVVYVVYVYVYVVYTVVNVN 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS "VIDEOS/CLIPS QUOTES QUIZ 


À EVERY YEAR 

4€! WHEN I WATCH 
THE OSCARS I'M 
ANNOYED... 


that films like King Kong, Moulin Rouge and Munich get the 





statue whilst the real cinematic heroes lose out. Not very Hollywood 


1 
Aha 
is it? 
We're here to put things right 
those should have won e 


AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 


Booo mios 

















我 们 来 看 看 视觉 设计 图 : 








AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


EVERY YEAR 


WHEN | WATCH THE 
OSCARS I'M ANNOYED... 


UNSUNG HEROES... 





full info. fuit info, e King Kong. Moulin 
OVERHYPED NONSENSE... Rougesno Re 


T 


THESE SHOULD HAVE WON »> 


NOTE: OUR OPINION IS ABSOLUTELY CORRECT, YOU ARE WRONG, EVEN IF YOU THINK YOU ARE RIGHT THAT'S A FACT. DEAL WITH IT. 





E 
MOULIN AGGE 


full into full ifo 


VÉLO a Sy 
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效果 图 中 的 导航 栏 链接 占据 了 整个 网 页 党 度 ， 我 们 得 重 现 这 个 效果 
如 下 : 


«nav role="navigation"> 
«ul» 








<li><a hrefz'£'»Why?«[a»«[li» 
<li><a href ="#">Synopsis</a></li> 
<li><a hrefz'£'»Stills/Photos«/a»«/li» 
<li><a hrefz'£'»Videos/clips«[a»«[li» 
<li><a href=" #">Quotes</a></li> 
<li ><a href=" #">Quiz</a></li> 
</ul> 
«[ nav» 
首先 ， 我 们 设 定 nav 元 素 使 用 table 布局 : 
nav ( 
display: table; 
|* more code... */ 
} 
然后 将 <ul > 显示 为 table- row: 
nav ul ( 
display: table-row 
|* more code... */ 
} 
最 后 将 列表 项 显示 为 table-cells: 
nav ul li ( 
display: table-cell; 
|* more code... */ 
} 








这 样 做 可 以 保证 如 果 有 另外 的 列表 项 追加 进来 ， 同 样 会 自动 地 调整 





后 , 使 用 CSS3 选择 需 将 最 后 一 个 列表 项 的 文字 置 为 右 对 齐 , 将 第 一 
左 对 齐 。 
nav ul li:last-child ( 
text-align: right; 
} 
nav ul li:first-child { 
text-align: left; 
} 





此 时 在 浏览 器 中 看 看 效果 ， 导 航 栏 接 近 原 始 设 计 图 中 的 效果 了 : 


。 导 航 栏 的 标签 代码 


它们 之 间 的 间距 。 最 
个 列表 项 的 文字 置 为 
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9Y9wwVYYVWVWVVVVVVVVVVVVVVVVVVVVV 
AND THE WINNER IS 


WHY? SYNOPSIS . STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


! EVERY YEAR 
X! WHEN | WATCH 
THE OSCARS I'M 
ANNOYED... 


that films like King Kong, Moulin Rouge and Munich get 





the statue whilst the real cinematic heroes lose out. Not very 
Hollywood is it? 


We're here to put things right 
these should have won » 


AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 


|e mos 

















不 用 担心 ， 此 处 的 table 只 是 显示 模式 而 已 

你 可 能 会 奇怪 我 到 底 是 怎么 想 的 ， 怎 么 会 建议 对 导航 栏 布局 使 用 table 
NI 模式 。 不 用 担心 ， 这 些 table 只 是 表象 。 也 就 是 这 些 表格 只 会 存在 于 
Q CSS 中 ， 并 不 会 对 页 面 标签 产生 任何 影响 。 我 们 只 是 告诉 浏览 器 让 这 些 

元 素 表 现 得 如 同 表格 一 样 ， 但 其 实 它们 并 不 是 表格 。 将 标签 显示 为 这 种 

模式 也 不 会 阻碍 我 们 为 不 同 的 视 口 使 用 不 同 的 布局 模式 ， 例 如 你 可 以 在 

视 口 小 于 768 像素 时 使 用 display: inline-block。 


2. nth-child 选择 器 

原始 设计 图 中 的 导航 栏 链接 交替 使 用 不 同 的 文字 颜色 , 这 个 怎么 实现 呢 ? CSS3 还 提供 了 
一 个 选择 器 ， 可 以 在 不 追加 额外 标签 代码 的 情况 下 解决 该 问题 : 

:nth-child(even) 

我 们 先 用 这 个 选择 器 来 解决 上 述 的 问题 , 然后 再 看 看 几 种 nth- child 的 用 法 一 一 可 解决 
之 前 需要 额外 标签 才能 搞定 的 问题 ,要 实现 导航 链接 中 交替 的 红色 文字 ,请 追加 如 下 样式 : 
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nav ul li:nth-child(even) a { 

color: $fe0208; 
} 


现在 导航 栏 文字 就 有 了 交替 颜色 效果 : 








"ce J- Q * D r- 





4 
| the winner isn't 


VVYVVVÝVYVYVVVVVVVVVVVVVVVVVVVVV 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


ER | *,, EVERY YEAR 
Ae A3 X WHEN I WATCH 
THE OSCARS I'M 


Overhyped nonsense... 
Mas 4 ANNOYED... 
AM " that films like King Kong, Moulin Rouge and Munich get the 


statue whilst the real cinematic heroes lose out. Not very 


MOULIN HOWEE 


Hollywood is it? 


We're here to put things right. 
Thess should have won > 





T T 


. A4A4AAAAAAAAAAAAAAAAAAAAAAAAAAA 


1171x1036 








怎么 样 ? 不 需要 一 行 jQuery 代码 也 不 需要 额外 的 标签 ! 我 说 什么 来 着 , CSS3 FEARR 
大 吧 ! 

3. 理解 nth 规则 的 作用 

那些 没 好 好 学 数学 的 前 端 工程 师 和 网 页 设计 师 ， 最 容易 被 nth 规则 吓 得 浑身 发 拌 ( 当然 ， 
写 PHP 代码 或 者 帮 别 人 构造 正则 表达 式 除外 )。 那 接 下 来 我 们 就 试 试 哺 下 这 块 “ 硬 骨头 ”， 
让 那些 后 端 大 神 也 对 咱们 刮目相看 。 

提 及 在 DOM (文档 对 象 模型 ， 或 者 说 简单 点 就 是 页 面 标签 中 的 元 素 ) 树 形 结构 中 选择 元 
素 ，CSS3 提供 了 一 些 基 于 nth 的 规则 ， 为 我 们 带 来 了 前 所 未 有 的 灵活 性 。 这 些 规 则 包 
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括 :nth-child(n) ,:nth-last-child(n) ,:nth-of-type(n) LU: nth-last-of- 
type(n) 。 前 面 的 例子 中 已 经 示范 了 使 用 (odd) zk (even) 参数 (用 以 修正 导航 链接 ), 
(n) 这 个 参数 还 可 以 有 其 他 几 种 形式 : 
口 使 用 整数 ， 如 : nth- child(2) 一 一 这 会 选中 列表 中 第 二 个 列表 项 ; 
OQ 使 用 数值 表达 式 ， 如 : nth-chil d(3n41) 一 一 这 样 会 从 第 一 个 元 素 开始 ， 然 后 每 三 个 
元 素 选 一 个 。 
整数 值 很 好 理解 ， 就 是 你 想 选 择 的 元 素 的 序号 。 而 数值 表达 式 对 我 们 来 说 有 点 不 好 理解 ， 
我 们 来 分 析 一 下 。 为 了 便于 理解 ， 我 们 从 括号 内 表达 式 的 右边 开始 分 析 。 例 如 我 想 确 定 
(2n43) 会 选择 那些 元 素 ， 就 从 右边 开始 〈 即 从 第 3 个 元 素 开始 )， 然 后 就 知道 它 是 从 这 
个 元 素 开 始 每 两 个 元 素 选 择 一 个 。 为 说 明 问 题 ， 可 以 将 之 前 的 导航 链接 规则 修改 成 这 样 : 
nav ul li:nth-child(2n43) a { 
color: #fe0208 
} 
可 以 看 到 , 第 3 个 链接 是 红色 的 , 之 后 每 两 个 就 选择 一 个 列表 项 显示 为 红色 ( 如 果 有 100 
个 列表 项 ， 这 个 规则 就 会 在 此 基础 上 继续 下 去 ): 























ca LN 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 








那 如 何 选择 第 二 个 列表 项 之 后 的 所 有 列表 项 呢 ? 可 以 写成 : nth- child(1n+2) ， 但 其 实 
不 需要 写 第 一 个 数字 1 , 因为 1 RAN 还 是 等 于 n, 所 以 可 以 简写 为 : nth- chil d( n$2) 。 
与 此 类 似 ， 如 果 想 选择 序号 为 3 的 倍数 的 元 素 ， 就 不 用 写成 : nth-child(3n43), EE 
Tj: nth- chi1d(3n) 就 行 ， 因为 3 的 倍数 肯定 是 从 第 3 个 开始 的 ， 无 需 专门 声明 。 
数值 表达 式 中 也 可 以 使 用 负数 ， 例 如 : nth- chil d(3n-2) ， 即 表示 从 倒数 第 2 个 元 素 开 
始 然后 每 三 个 元 素 选择 一 个 。 将 我 们 的 导航 链接 规则 照 此 修改 : 








nav ul li:nth-child(3n-2) a { 
color: £fe0208 

) 

浏览 器 中 的 效果 如 下 : 
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(C) And the winner isn't... 


VVVVYVVVNNNNNNNNNNNSNSU. 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 




















谢 天 谢 地 ， 我 讲 明 白 了 吧 ? 

child 和 1ast-child 的 区 别 在 于 , 1ast-child 是 从 文档 节点 树 的 末尾 开始 算 。 比 
如 : nth-last-child(-n43) 就 是 从 倒数 第 3 个 元 素 开 始 , 向 后 选择 之 后 的 所 有 元 素 ( 
为 使 用 了 -n， 所 以 方向 是 向 后 )。 使 用 该 规则 后 浏览 器 中 的 效果 如 下 图 所 示 : 














©) And the winner isn't... 


VVVVVVVVYVVVYVVVVVVVVVVYVYV 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 











最 后 , 我 们 来 看 看 : nth-1ast- of-type。 前 面 的 例子 中 在 对 子 元 素 计数 时 都 未 考虑 元 素 
的 类 型 ，; nt h-1ast- of-type 则 可 以 指定 你 想 选 择 的 元 素 类 型 。 请 看 如 下 代码 结构 : 


«ul» 
«li classz'internal'»«a hrefz's"»Why?«[a»«[li» 
<li><a hrefz'£'»Synopsis«[/ a»«[li» 
«li classz'internal"»«a hrefz'2'»5Stills/Photos«/a»«l[li» 
«li classz'internal'»«a hrefz'£'»Videos/clips«/a»«[li» 
«li classz'internal"»«a hrefz'£'»Quotes«/a»«[li» 
«li classz'internal'»«a hrefz'£'»Quiz«[a»«[li» 


«lul» 

注意 上 面 的 第 二 个 列表 项 没有 internal 类 。 

看 看 这 个 规则 : 

nav ul li.internal:nth-of-type(n42) a { 
color: #fe0208 

} 
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上 面 的 代码 告诉 浏览 器 :“ 从 第 二 个 匹配 元 素 开 始 , 选择 每 一 个 类 名 为 internal 的 列表 
Jj." 浏览 需 中 的 效果 如 下 : 





AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 














CSS3 的 计数 方式 和 jQuery 不 太一 样 
a 如 果 你 经 常 使 用 jQuery 就 会 知道 ， jQuery 中 的 计数 是 从 0 开始 的 。 比 如 
在 jQuery 中 使 用 整数 1 来 选择 元 素 ， 实 际 上 会 选中 第 二 个 元 素 。 但 在 
CSS3 中 ， 计 数 从 1 开始， 所 以 整数 1 会 匹配 第 一 个 元 素 。 


4. 否定 CnoD 选择 器 E= 


另 一 个 便利 的 选择 器 是 否定 伪 类 选择 器 ， 用 于 选择 不 满足 某 些 条 件 的 元 素 。 例 如 ， 继 续 
使 用 前 面 例子 中 的 结构 代码 ， 将 规则 修改 为 : 


nav ul li:not(.internal) a { 
color: £fe0208; 
} 


可 以 看 出 我 们 是 想 选 择 没有 int ernal 类 的 列表 项 。 浏 览 器 中 的 效果 如 下 所 示 : 











AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 











至 此 我 们 已 经 学 习 了 结构 伪 类 (〈 详细 信息 请 见 http://www.w3.org/TR/selectors/Zstructural- 
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pseudos ) 的 主要 内 容 。 除 此 之 外 ，CSS3 还 有 很 多 其 他 选择 器 。 如 果 你 在 开发 Web 应 用 ， 
那 完 整 的 UI 元 素 状 态 伪 类 列表 ( http:/www.w3.org/TR/selectors/#UTstates ) 则 值得 一 读 ， 
它 对 你 极 有 帮助 ， 例 如 可 以 让 你 根据 元 素 被 选中 与 否 来 应 用 样式 规则 。 


5.5.8 ”对 伪 元 素 的 修正 


伪 元 素 在 CSS2 中 已 经 存在 ，CSS3 标准 对 其 语法 做 了 一 些 细微 的 修正 。 举 几 个 你 可 能 还 
有 印象 的 例子 ，p :first-1ine 会 选中 <p > 标签 的 第 一 行内 容 ，p:first-|etter 会 选 
中 其 中 的 第 一 个 字母 。CSS3 要 求 对 伪 元 素 使 用 两 个 冒号 以 便 与 伪 类 进行 区 别 。 因 此 刚才 
的 例子 应 该 改写 为 p: :first-|etter。 但 注意 Internet Explorer 8 及 更 低 版 本 的 IE 26i 
识别 两 个 冒号 的 语法 ， 它 们 只 识别 一 个 冒号 。 

first-line 对 响应 式 设计 来 说 好 用 吗 

first-line 伪 元 素 非常 方便 的 一 个 特点 是 它 会 根据 视 口 自动 变化 。 例 如 如 下 的 规则 : 


p::first-line ( 
color: fs&ffOcff; 
} 


如 你 所 想 ， 第 一 行文 字 被 泻 染 为 可 怕 的 粉红 色 〈 这 让 我 想起 了 《 红 磨 坊 》”): 








And the winner na't 


VVVVVVVVVVVN NN NNI 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


1 EVERY YEAR WHEN I 
4€ WATCH THE OSCARS 
I'M ANNOYED... 


that films like King Kong, Moulin Rouge and Munich get the statue 








whilst the real cinematic heroes lose out. Not very Hollywood is it? 


We're here to put things right 
these sbould have won r 














视 口 大 小 不 同时 ， 泻 染 为 粉红 色 的 文字 片段 也 不 相同 : 








(D Moulin Rouge: movie.douban.com/subject/5073826/, — 一 译 者 注 
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5.6 





the winne 


VVVVVVVVVVVVVVVVVVVVVVVVVVYVY 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


EVERY YEAR 
WHEN | WATCH 
THE OSCARS 
l'M ANNOYED... 


that films like King Kong, Moulin Rouge and 
Munich get the statue whilst the real cinematic heroes 
lose out. Not very Hollywood is it? 


We're here to put things right 
these should have won = 














于 是 ， 在 响应 式 设 计 中 就 有 了 一 种 方法 ， 不 需要 修改 标签 代码 ， 即 可 方便 地 将 文本 第 一 
行内 容 ( 即 浏 览 器 泻 染 出 来 的 第 一 行 ， 不 是 标签 代码 中 的 第 一 行 ) 显示 得 与 众 不 同 。 
希望 这 几 节 对 CSS3 选择 器 的 简短 突击 学 习 , 让 你 明白 了 使 用 它们 不 必修 改 现 有 设计 和 增 
加 新 标记 。 过 去 我 经 常 需要 使 用 JavaScript 库 (如 jQuery ) 来 做 复杂 的 元 素 选择 ， 现 在 
CSS3 基本 上 消灭 了 这 种 需求 。 还 有 一 点 令 人 欣慰 的 是 ，CSS3 选择 絮 模 块 现在 已 处 于 推 
荐 标准 状态 ， 也 就 是 说 它 已 是 一 个 非常 成 熟 的 模块 ， 从 现在 起 不 会 再 有 大 的 改动 。 








自 定义 网 页 字体 


多 年 来 我 们 一 直 被 迫使 用 一 组 单调 乏味 的 Web 安全 字体 。 当 网 页 设计 中 确实 需要 一 些 优 
雅 的 字体 时 , 我 们 通常 都 是 使 用 图 片 来 替代 , 并 对 元 素 使 用 text - indent 规则 将 实际 的 
文本 移出 视 口 范围 。 
曾 有 一 些 稍微 高 级 点 的 备 选 方案 , 来 为 网 页 增加 更 加 个 性 的 字体 效果 。sIFR (http://www. 
mikeindustries.com/blog/sifr/ ) 和 Cufón ( http://cufon.shoqolate.com/generate/ ) 都 使 用 Flash 
和 JavaSeript 来 重建 文本 元 素 ， 然 后 使 用 自 定义 字体 来 显示 内 容 。 但 是 在 响应 式 设计 中 ， 

我 们 力求 精简 、 语 义 和 内 容 优先 ， 所 以 多 余 的 图 片 和 腾 肿 的 代码 应 该 尽 可 能 避免 。 幸 好 ， 
CSS3 提供 了 一 种 自 定义 网 页 字体 的 方法 ， 用 它 可 以 描绘 美丽 的 新 时 代 。 
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5.6.1 @font-face 规则 


5.6.2 


Gf ont-f ace 规则 在 CSS2 中 已 经 存在 (但 随后 在 CSS 2.1 中 被 删除 ). TE 4 甚至 对 其 提 
供 了 部 分 支持 ( 真 的 ， MIRR)! 那 现 在 都 CSS3 了 ， 怎 么 还 提 它 呢 ? 


因为 它 又 回来 了 ! @f ont -face 已 经 被 重新 引入 CSS3 字体 模块 (http://www.w3.org/TR/ 
css3-fonts )。 过 去 在 网 页 中 使 用 自 定 义 字 体 一 直 很 麻烦 ， 直 到 最 近 才 开始 有 了 一 些 真 正 可 
行 的 网 页 字体 解决 方案 。 但 浏览 器 厂商 对 不 同 的 字体 格式 和 具体 实现 仍 在 争论 。 如 
Embedded OpenType ( EOT ) 字体 是 Internet Explorer 的 首选 格式 ( 其 他 浏览 器 都 不 支持 )， 
其 他 浏览 器 更 钟爱 常见 的 TrueType 格式 (TTF), WA Scalable Vector Graphics (SVG) 以 
及 Web Open Font Format (WOFF)。 使 用 @f ont- f ace 为 网 页 设 定 字体 时 , 可 谓 喜 忧 参 半 。 
我 们 先 说 忧 吧 …… 

在 某 一 个 通用 的 字体 格式 一 统 天 下 之 前 ， 我 们 需要 为 同样 的 字体 提供 多 种 格式 以 兼容 不 
同 的 浏览 器 。 和 竞争 激烈 的 视频 格式 一 样 ， 必 须 等 到 某 种 字体 格式 明显 胜出 的 时 候 ， 才 
能 删除 对 其 他 方案 的 支持 。 


喜 的 是 ， 现 在 给 每 种 浏览 器 设置 对 应 的 自 定义 字体 都 很 简单 。 我 们 来 试 试 ! 




















使 用 @font-face Ex A D» va e ps 


我 们 将 用 @f ont- f ace 规则 改进 一 下 And the winner isnt... 网 站 版 面 。 


首先 我 们 得 有 字体 。 网 上 有 很 多 很 棒 的 字体 资源 站 点 , 有 免费 的 也 有 收费 的 。 虽然 Google 
也 提供 了 免费 的 网 页 字体 ， 且 基本 上 都 可 使 用 ef ont -face 规则 ( www.google.com/ 
webfonts )， 但 我 个 人 最 喜欢 Font Squirrel ( www.fontsquirrel.com )。 另 外 还 有 Typekit 
( www.typekit.com ) 和 Font Deck ( www.fontdeck.com ) 上 也 有 一 些 非常 优秀 的 付费 字体 。 


z mn 

Free 
mr | 
Memes i 








sfont-face Generator Forus 


tor Forum 
O Download TTF 


[77 
Webfonts 
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巧合 的 是 ， 我 在 网 站 中 使 用 的 来 自 Font Squirrel 的 字体 都 是 免费 的 (我 承认 我 抠门 :) )。 
这 些 字体 包括 Bebas Neue, Bitstream Vera Sans 和 Collaborate Thin。 从 Font Squirrel 上 下 
RAJO ont-face 包 是 一 个 ZIP 文件 ， 里 面包 含 该 字体 各 种 格式 的 文件 CWOFF, TTF, 
EOT 和 SVG )， 以 及 一 个 用 来 演示 字体 调用 规则 的 styl esheet.css 文件。 例如， 使 用 
Bebas Neue 字体 的 规则 如 下 : 


@font-face ( 

ont-family: 'BebasNeueRegular'; 

src: url('BebasNeue-webfont.eot'); 

src: url('BebasNeue-webfont.eot? £iefix') format('embedded- 

opentype'], 
url('BebasNeue-webfont.woff') format('woff'), 
url('BebasNeue-webfont.ttf') format('truetype'), 
url('BebasNeue-webfont.svg£BebasNeueRegular') format('svg'); 

ont-weight: normal; 

ont-style: normal; 








) 


bu P D Un 浏览 器 会 根据 自身 特性 应 用 列表 中 能 识别 的 样式 ， 忽 略 
识别 的 样式 。 用 这 种 方法 能 保证 无 论 什 么 浏览 器 都 有 一 个 可 用 字体 。 


上 面 这 段 代 码 对 “复制 粘贴 党 ”来 说 很 方便 ， 但 需要 注意 字体 文件 的 存放 路 径 。 比 如 我 

一 般 会 将 ZIP 包 中 的 字体 文件 存放 在 一 个 专门 的 font s 文件 夹 , 该 文件 夹 与 css 文件 来 

平 级 。 因 此 我 将 上 面 这 段 代码 拷贝 到 样式 表 文 件 中 之 后 ， 还 需要 对 文件 路 径 做 点 修改 ， Gm 
具体 如 下 所 示 : 














@font-face ( 
a 'BebasNeueRegular'; 
src: url('../fonts/BebasNeue-webfont.eot'); 
Src: ur .[fonts/ BebasNeue- webfont. eot? £i efi x') 
format um E 
url('../fonts/BebasNeue- webfont.woff') format('woff'), 
url('../fonts/BebasNeue- webfont.ttf') format('truetype'), 
url('../[fonts/BebasNeue- webfont.svgsBebasNeueRegular') 
format('svg'); 
font-weight: normal; 
font-style: normal; 





} 


接 下 来 就 是 给 相关 样式 设置 正确 的 字体 和 粗细 ( 如 果 需 要 )。 此 处 我 想 将 导航 链接 文字 的 
字体 修改 为 Bebas Neue: 


nav ul li a ( 
height: 42px; 
line-height: 42px; 
text-decoration: none; 
text-transform: uppercase; 
font-family: 'BebasNeueRegular'; 
font-size: 1.875em; /*30 + 16 */ 
color: black; 
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导航 栏 在 浏览 锅 中 变 成 了 如 下 效果 : 





Med tha minner nnt. 


VVVVVVVVVVVVVVVVVVVVVVVVVVVVV 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES Quiz 














替换 字体 之 后 一 般 还 需要 修改 字体 大 小 。 不 过 我 们 之 前 已 经 将 字体 换算 过 程 写 在 了 注释 
里 ， 那 就 很 容易 依 此 修改 了 。 如 果 设 计 图 和 CSS 代码 都 使 用 同一 款 字 体 ， 那 会 有 一 个 额 
外 的 好 处 ， 你 可 以 直接 从 设计 图 中 获取 字体 大 小 。 比 如 我 们 例子 中 的 设计 图 对 “EVERY 
YEAR...” 开 头 的 这 段 文字 大 小 设 定 为 102 像素 , 所 以 直接 使 用 百 试 不 碍 的 “目标 元 素 尺 
寸 + 上 下 文 元 素 尺寸 = 百分比 尺寸 ”公式 ， 将 文字 大 小 转换 为 相对 尺寸 : 
#content hl { 

font-family: Arial, Helvetica, Verdana, sans-serif; 

text-transform: uppercase; 

font-family: 'BebasNeueRegular'; 

font-size: 6,375em; /* 102 + 16 */ 
} 
将 所 有 相关 样式 中 的 font-family Mfont-size 声明 全 部 修改 之 后 , (使 用 WOFF 字 
体格 式 的 ) 网 页 在 Google Chrome 浏览 器 中 的 效果 如 下 图 所 示 : 











VYVVVVVVVVVVVVVVVVVNYYVYYNV 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES Quiz 


"mm 5, EVERY YEAR 
TE Ft A Yr 
"iy E Q WHEN | WATCH THE 
> ^ OSCARS I'M ANNOYED.. 
jt f ke Ki d ét 1g, Moulir Rouge 
ind Munich g whilst the real 





nat 


BE . A SHOULD HAVE EWON » 


IEEL QUI PIA E ABCOLLTE. Y CORBECT. YOU ARE WRONG. [VEN 


人 AAAAAAAAAAAAAAAAAAAAAAAAAA， 
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网 站 的 整体 效果 尚 不 完美 ， 但 现在 字体 完美 还 原 了 设计 图 中 的 效果 。 为 了 对 比 效 果 ， 我 
们 看 看 iPad 2 (iOS 4.2 之 后 的 版 本 支持 TTF 字体 格式 ) 上 的 显示 效果 : 











And me winner iunt 





Ome 
AND THE WINNER IS 
WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 





EVERY YEAR 


WHEN | WATCH THE OSCARS 
I'M ANNOYED... 


AE THESE SHOULD HAVE WON > 


UNSUNG HEROES... OVERHYPED NONSENSE... 





5.7. WER ERIS A 


我 第 一 次 使 用 @f ont-face SEPEDEBLITUE OBEN, KAARE. HAERA 
响应 式 设 计 才 会 发 生 标 题 模 糊 ， 而 是 所 有 使 用 @f ont -face 字体 的 标题 都 不 能 幸免 。 下 
图 是 当时 网 站 设计 图 的 部 分 截图 : 











We're Bridestone: 
providing beautiful quality natural 


stonc products. 


图 Stone Products ÁN Bespoke 


从 Restoration Q Find Us 
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网 站 制作 完成 后 ， 相 关 部 分 的 标签 代码 如 下 : 


«div classz'intro'» 
«hl»We're Bridestone: «span»providing «b»beautiful «/ b» quality 
«j»natural«/i» stone products, «/span»«/ h1» 
„more code.. 
</div> <!-- intro: END --> 


相关 的 CSS 代码 如 下 : 


„intro hl ( 

ont-family: CaudexBold, "Times New Roman", Times, serif; 
ont-size: 2.63636364em 

ine-height: lem 











.intro hl span { 

ont-size: 0.545454545em; 

ont-family: CaudexRegular, "Times New Roman", Times, serif; 
ont-weight: normal; 





} 
虽然 我 使 用 @f ont-face 设 定 了 和 设计 图 中 完全 一 样 的 字体 ， 但 浏览 器 中 标题 文字 看 起 
来 还 是 有 一 点 模糊 : 














We're Bridestone: 


providing beautiful quality natural 


stone products. 


tff Stone Products ÁN Bespoke 
7 Restoration 9 Find Us 











希望 你 能 看 出 来 We're Bridestone 这 几 个 词 和 设计 图 的 效果 不 太一 样 。 此 处 的 文字 更 粗 ， 
因而 清晰 度 下 降 了 。 

后 来 , 我 发 现 导 致 该 问题 的 原因 是 字体 粗细 。 除非 显 式 声明 font- wei ght 属性 , 否则 大 
多 数 浏 览 器 都 会 为 标题 元 素 应 用 标准 的 font - wei ght (一 般 都 是 700 ), 因此 解决 方法 就 
是 始终 为 应 用 了 ef ont -face 字体 的 标题 元 素 设 定 font - wei ght 属性 。 例 如 在 本 例 中 ， 
我 将 CSS 代码 修改 如 下 : 


.producti ntro hl { 
font-family: CaudexBold, "Times New Roman", Ti mes, serif 
font-weight: 400; 
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5.8 


font-size: 2.63636364em; 

line-height: lem 
} 
这 样 就 会 覆盖 浏览 器 默认 为 标题 元 素 设 定 的 font-weight 值 ， 修 改 后 的 效果 如 下 图 所 
示 ， 与 设计 图 效果 完全 一 致 : 











We're Bridestone: 


providing beautiful quality natural 


stone products. 


fia Stone Products ÁN Bespoke 
7^ Restoration 9 Find Us 











在 响应 式 设计 中 使 用 自 定义 @font-face 字体 的 注意 事项 
使 用 @f ont -face 自 定 义 网 页 字体 的 方法 总 的 来 说 不 错 。 唯 一 需要 注意 的 ， 是 在 响应 式 
设计 中 使 用 该 技术 时 要 考虑 到 字体 文件 大 小 。 例 如 ，And the winner isn’t... WEH T = 
种 自 定义 字体 : Bebas Neue, Bitstream Vera Sans 和 Collaborate Thin。 最 坏 的 情况 下 ， 如 
果 设 备 演 染 页 面 时 需要 SVG 字体 格式 , 那 相 对 于 使 用 标准 的 网 页 安全 字体 如 Arial, 会 增 
加 70KB 的 额外 数据 。 这 几 种 字体 其 实 相 当 轻 量 级 一 一 有 些 字体 可 能 会 非常 庞大 ! 如 果 
你 想 保 持 网 站 的 高 性 能 ， 那 请 注意 控制 自 定义 字体 的 文件 尺寸 。 
真正 的 响应 式 字 体 单位 还 不 能 广泛 使 用 
当前 的 CSS3 字体 模块 工作 草案 中 引入 了 视 口 相 对 字体 C http://www.w3. 

a org/ TR/ css3-values/#viewport-relative-lengths )。 相 对 单位 vw( 视 口 宽度 入 

vh ( 视 口 高 度 ) f vm ( 视 口 最 小 边 长 ， 即 vm 和 vh 中 较 小 的 一 个 ) 在 

获得 浏览 器 广泛 支持 之 后 ， 能 为 我 们 节省 大 量 开发 时 间 。 翡 哀 的 是 目前 

除了 于 9 之 外 ， 其 他 浏览 器 都 不 支持 视 口 相 对 单位 。 






































新 的 CSS3 颜色 格式 和 透明 度 


截止 目前 ，CSS3 已 经 给 予 了 我 们 选择 元 素 和 添加 自 定 义 字 体 的 强大 支持 。 现 在 我 们 来 看 
看 CSS3 的 颜色 使 用 方法 ， 这 些 方法 在 以 前 简直 不 可 能 实现 。 
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5.8.1 


首先 ，CSS3 允许 我 们 使 用 新 方法 如 RGB 或 HSL 来 声明 颜色 。 另 外 ， 我 们 还 能 在 这 两 个 
方法 后 边 追 加 一 个 透明 通道 (分 别 是 RGBA 和 HSLA )。 























RGB 颜色 


RGB ( 红 绿 蓝 ) 是 一 种 已 存在 了 数 十 年 的 颜色 体系 。 它 的 原理 是 通过 定义 不 同 的 红 绿 蓝 
色 值 来 组 成 一 个 颜色 。 例 如 ，And the winner isnt... 网 站 中 奇数 导航 链接 文字 的 颜色 ， 在 
CSS 中 被 定义 为 一 个 十 六 进 制 值 #f e0208: 











nav ul li:nth-child(odd) a ( 
color: #fe0208 
} 
在 CSS3 中 ， 该 值 可 以 使 用 RGB 值 来 描述 : 
nav ul li:nth-child(odd) a { 


color: rgb(254, 2, 8); 


KERE Fr iE et TL TRA RC E P i n Pts [e] EST S rr RC RIF 7 ER ELRII RGB 值 。 下 面 
的 截图 展示 了 Photoshop 的 颜色 选择 器 , 图 中 的 R、G 和 了 B 输入 框 中 显示 了 每 个 颜色 通道 
的 值 : 








new OK 


C J —— 3 a 
mH: | Cancel — | 
© | Add To Swatches | 
g (d Te Swatches. 
current | Color Libraries | 
| @n: Bss] Orls4 | 
js: [o9 |% J)a: [80 
| O&[e |% Ob:les | 
JR: [254 c:[o_]% 
^m m 
OB: [8 | Y:|92 |% 


| | Only Web Colors LE. ] 
4 [fe0208 Ko |% 




















可 以 看 到 R 的 值 是 254，G 的 值 是 2, 而 B 的 值 是 8。 这 个 值 很 容易 转换 为 CSS3 颜色 值 : 
在 CSS 中 , 颜色 模式 (如 rgb ) 定义 之 后 ， 圆 括号 中 的 颜色 值 必须 按照 红 、 绿 、 蓝 这 个 顺 
序 排列 ， 之 间 使 用 逗号 分 隔 。 
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5.8.2 


HSL 颜色 
除了 RGB ，CSS3 还 可 使 用 HSL ( 色相、 饱和 度 、 亮 度 ) 模式 来 声明 颜色 。 





HSL 不 是 HSB 


AL 
Q 不 要 错误 地 认为 图 片 编辑 软件 如 Photoshop 中 显示 的 HSB ( 色相 、 饱和 
度 、 明 度 ) 值 就 是 HSL 一 一 它们 不 一 样 "! 


HSL 被 广泛 使 用 是 因为 它 非 常 容易 理解 ， 根 据 该 模式 提供 的 颜色 值 就 能 描绘 出 具体 颜 
色 。 比 如 ,除非 你 是 某 种 颜色 选择 避 狂 人 ， 否 则 我 敢 打 赌 你 肯定 无 法 立即 告诉 我 
rgb(255, 51, 204) 是 什么 颜色 ? 有 人 愿 打 赌 吗 ?” 肯定 没有 , 我 也 不 会 。 但 是 给 我 HSL 
的 颜色 值 hsl (315，100%，60%) ， 我 可 以 大 概 猜 出 它 是 位 于 洋红 色 和 正 红 色 之 间 的 某 
种 颜色 〈 实 际 上 它 是 一 种 喜庆 的 粉红 色 一 一 我 可 能 开始 有 点 喜欢 《 红 磨 坊 》 了 )。 我 怎 
么 知道 ? 其 实 很 简单 ……: 

HSL 模式 基于 一 个 3609 的 色相 环 ， 第 一 个 数字 代表 色相 ，60" 时 为 黄色 ，120。 时 为 绿 
色 ，180。 ENEE, 240° 时 为 蓝 色 ，300°。 时 为 洋红 色 ，360" 时 为 红色 。 所 以 前 面 提 
到 的 HSL 颜色 色相 为 315， 所 以 很 容易 看 出 它 介 于 洋红 (300° ) 和 红 ( 360° ) 之 间 。 其 
后 的 两 个 值 分 别 表示 饱和 度 和 亮度 ， 值 为 百分比 ， 用 于 改变 基础 的 色相 。 如 果 想 要 更 加 
饱满 的 颜色 ， 则 第 二 个 值 使 用 一 个 高 一 点 的 百分比 即 可 。 最 后 一 个 值 控制 亮度 ,可 在 0% 
的 全 黑 到 10096 B5 4 F1 zz TR] AE Es 

因此 ， 定 义 了 HSL 颜色 值 之 后 ， 在 它 的 基础 上 创建 类 似 颜 色 就 很 方便 ， 只 需要 修改 饱和 
度 和 亮度 的 百分比 值 即 可 。 例 如 ， 我 们 的 红色 导航 链接 可 以 使 用 HSL 颜色 值 来 定义 : 


nav ul li:nth-child(odd) a { 
color: hsl(359, 999, 50%) 
































如 果 我 们 想 在 鼠标 甚 停 时 让 文字 颜色 稍微 变 深 一 点 ， 就 可 以 使 用 相同 的 HSL 值 ， 然 后 只 
修改 一 下 亮度 百分比 (最 后 一 个 值 )， 如 下 代码 片段 所 示 : 

nav ul li:nth-child(odd) a:hover ( 

i color: hsl(359, 99%, 40%) 

总 之 ， 如 果 你 能 记 住 针对 色相 环 的 这 个 顺口 汶 : Young Guys Can Be Messy Rascals (或 者 
其 他 你 容易 记 住 的 顺口 溜 ”)， 那 你 基本 就 能 自己 写 出 HSL 颜色 值 , 或 者 基于 某 种 颜色 创 
建 类 似 颜色 ， 不 用 再 依赖 颜色 选择 器 。 在 公司 聚会 时 把 这 个 技巧 给 那些 后 端 PHP 专家 炫 




















(A 





Q 比如 中 国人 常 说 的 “ 赤 橙 黄 绿 青 蓝 紫 "”。 一 一 编者 注 


体 区 别 请 见 : http://tinyurl.com/9qgz8ow。 一 一 译 者 注 
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5.8.3 


5.8.4 


光一 下 ， 他 们 会 对 你 肃然 起 敬 。 





针对 IE6、IE7 和 IE8 提供 备用 颜色 值 


你 可 能 都 猪 到 了 ， 版 本 9 以 下 的 下 浏览 需 不 文 持 RGB 和 HSL。 因 此 ， 如 果 需 要 针对 这 
些 浏 览 器 提供 备用 的 颜色 声明 ， 则 要 将 其 放 在 RGB 或 HSL 值 之 前 。 例 如 ， 为 前 面 提 到 
的 导航 链接 增加 备用 十 六 进 制 颜色 值 的 代码 如 下 : 
nav ul li:nth-child(odd) a { 

color: f$fe0208; 


color: hsl(359, 999, 50%) 
} 





透明 通道 

为 什么 我 们 不 继续 沿用 已 被 使 用 多 年 的 可 靠 的 十 六 进 制 颜 色 值 ， 非 要 自 找 麻烦 地 使 用 
HSL 或 RGB? 有 这 样 的 疑惑 很 正常 。HSL 和 RGB 与 十 六 进 制 颜色 值 最 大 的 区 别 ， 是 它 
们 支持 透明 通道 。 这 意味 着 可 以 让 元 素 透 明 ， 使 其 下 方 的 元 素 可 见 。 


我 们 来 对 And the winner isnt... 网 站 做 点 修改 以 说 明 透 明 效 果 。 首 先 ， 我 们 给 body 元 素 
设置 一 个 很 烂 的 背景 图 ， 如 下 : 
body ( 

background: url(../img/grunge.jpg) repeat; 
} 
然后 ， 我 们 给 #wr apper div (C 8128 P8 Fit CB 7638 ) 添加 一 个 白色 的 背景 。 不 过 此 
处 我 们 不 会 使 用 十 六 进 制 的 白色 ， 而 是 使 用 HSLA 颜色 值 ， 具 体 如 下 面 代码 片段 中 加 粗 
的 代码 行 所 示 : 
swrapper ( 

margin-right: auto; 

margin-left: auto; 

width: 9695 /* 最 外 层 的 DIV */ 

max-width: 1414px 

background-color: hsla(0, 09, 100%, 0.8); 
} 
HSLA 颜 色 声 明 与 标准 的 HSL 规 则 类 似 。 不 过 颜色 必须 得 声明 为 hs1a 模式 ( 而 不 是 ns1 )， 
增加 一 个 额外 的 透明 度 值 ， 该 值 的 格式 是 一 个 介 于 0 ( 全 透明 ) 到 1 (不 透明 ) 之 间 的 
小 数 。 上 面 代码 中 我 们 将 白色 的 #wr apper 设置 为 半 透 明 。 浏 览 器 中 的 显示 效果 如 下 
所 示 : 
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Munich get the statue whilst the real i 
cinematic n Des lose out Not very 
Hc 
We're here to put things right F 
THESE SHOULD HAVE WON > 和 
[^] E - 











RGBA 的 语法 和 HSLA 的 基本 一 样 ， 即 在 颜色 值 后 追加 一 个 透明 度 值 : 
background-color: rgba(255, 255, 255, 0.8); 


希望 你 已 经 看 出 ,为 RGB 和 HSL 颜色 模式 增加 透明 通道 ， 能 让 我 们 快捷 灵活 地 处 理 分 
层 全 加 元 素 。 也 就 是 说 我 们 不 用 再 依赖 透明 图 片 (如 PNG zx, GIF 图片 ) 来 实现 这 类 视觉 
效果 ， 这 对 制作 响应 式 设计 是 个 绝 好 的 消息 。 


为 什么 不 使 用 opacity 


CSS3 还 允许 通过 0pacity 声明 来 设置 元 素 的 透明 度 。 该 透明 度 的 值 也 
M 是 一 个 介 于 0 到 1 之 间 的 小 数 ( 如 将 0pacity 设置 为 0.1 表 示 为 10% 透 
Q 3] )。 但 是 这 种 透明 度 与 RGBA 及 HSLA 有 所 不 同 ， 这 种 方式 设置 的 透 
明度 会 对 整个 元 素 产 生 影响 ( 元 素 的 内 容 都 会 透明 ), 反之 , 使 用 HSLA 
A RGBA 则 可 以 仅 让 元 素 的 某 些 部 分 有 透明 效果 。 这 样 ， 一 个 元 素 可 以 
带 有 HSLA 透明 背景 ， 但 内 部 的 文字 仍然 不 透明 。 


























CSS3 颜色 模块 是 第 一 个 成 为 推荐 标准 的 CSS3 模块 ,因此 和 CSS3 选择 器 模块 一 样 ,CSS3 
颜色 模块 现在 就 可 以 放心 使 用 ， 该 模块 的 实现 方法 之 后 不 会 再 有 什么 变化 。 
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5.9 小 结 





在 本 章 , 我 们 学 习 了 如 何 使 用 新 的 CSS3 选择 器 来 选择 页 面 中 任何 我 们 想 要 的 元 素 。 我 们 
还 学 习 了 如 何在 超 短 时 间 内 制作 可 响应 的 多 栏 内 容 布 局 ， 以 及 如 何 解 决 一 些 常见 的 烦人 
问题 ( 如 超 长 URL 换行 之 类 )。 此 外 我 们 还 研究 了 新 的 CSS3 颜色 模式 ， 以 及 如 何 应 用 带 
有 透明 通道 的 RGB 和 HSL 颜色 以 制作 优雅 的 视觉 效果 。 本 章 我 们 还 学 习 了 如 何 使 用 
@font-face 规则 来 为 网 页 添加 自 定义 字体 ,终于 将 我 们 从 多 年 来 不 得 不 使 用 网 页 安全 字体 
的 梭 格 中 解放 了 出 来 。 尽 管 学 习 了 这 人 么 多 高 级 的 新 特性 和 新 技巧 ， 其 实 我 们 仅 了 解 了 
CSS3 的 一 点 皮毛 。 接 下 来 我 们 将 继续 学 习 如 何 使 用 CSS3 的 文字 阴影 、 盒 阴影 、 渐 变 以 
及 多 重 背 景 图 片 ， 让 我 们 的 响应 式 设计 更 快速 、 高 效 、 容 易 维护 。 
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上 一 章 , 我 们 学 习 了 一 些 简捷 有 效 的 CSS3 技巧 ,对 制作 响应 式 设计 很 有 帮助 。 另 外 还 使 
用 CSS3 的 @f ont - f ace 规则 为 网 页 添加 了 自 定 义 字 体 , 使 其 视觉 效果 大 大 提升 。 此 外 还 
学 习 了 CSS3 中 选择 DOM 元 素 的 工具 。 在 学 习 了 这 些 基础 知识 之 后 ， 我 们 来 看 看 CSS3 
的 一 些 高 级 特性 ， 这 些 特性 能 给 我 们 的 响应 式 设计 带 来 显著 的 美学 提升 ， 而 且 大 部 分 都 
不 需要 图 片 ， 能 为 我 们 节省 宽带 。 
本 章 内 容 
口 使 用 CSS3 制作 文字 阴影 
口 使 用 CSS3 制作 盒 阴 影 ( 即 元 素 投影 ) 
口 使 用 CSS3 制作 渐变 背景 
口 使 用 CSS3 的 多 重 背景 图 片 
口 使 用 CSS3 背景 渐变 来 制作 图案 
口 使 用 CSS3 的 @f ont -face 规则 来 制作 节省 带宽 的 图 标 
在 此 ， 我 要 重申 一 遍 为 什么 CSS3 对 响应 式 设计 非常 有 用 : 使 用 CSS3 替代 图 片 ， 在 有 带 
宽 限 制 的 网 页 中 可 有 效 减少 http 请 求 (从 而 使 网 页 加 载 更 快 )， 并 可 使 网 页 更 灵活 、 更 容 
易 维 护 。 这 些 优 点 甚至 在 传统 的 固定 宽度 桌面 版 网 页 中 也 很 有 用 ， 但 它们 在 响应 式 设 计 
中 更 为 重要 ， 因 此 它们 可 以 让 网 页 在 不 同 的 视 口 中 显示 不 同 尺寸 的 模块 或 文字 阴影 ， 而 
不 需要 为 此 单独 制作 和 导出 图 片 。 相 信 你 肯定 也 这 么 想 ， 那 就 开始 吧 。 
浏览 器 私有 前 组 
在 开发 CSS3 时 ， 要 记 住 添加 相关 的 浏览 器 私有 前 级 以 保证 最 广泛 的 浏 
CU, 览 器 兼容 。 除 了 这 种 方法 ， 如 果 你 愿意 在 代码 中 插入 一 点 JavaScript， 则 
Q 可 以 考虑 之 前 说 过 的 -prefix-free 脚本 。 该 脚本 会 自动 为 CSS3 规则 追加 浏 
览 器 私有 前 级 , 这 样 你 在 样式 表 中 就 可 以 只 写 W3C 规定 的 标准 代码 。 该 
脚本 地 址 为 : http://leaverou.github.com/prefixfree/。 
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6.51 文字 阴影 


6.1.2 








文字 阴影 是 最 被 广泛 支持 的 CSS3 特性 之 一 。 和 @f ont - face 一 样 , 它 有 过 一 段 短暂 的 前 
^E, 之 后 在 CSS 2.1 中 被 废弃 。 好 在 ， 它 再 次 投胎 转世 ， 并 获得 了 广泛 文 持 ( 所 有 现在 浏 
览 器 及 Internet Explorer 9 之 后 的 正 均 支持 它 )。 


我 们 来 看 看 文字 阴影 的 基本 语法 : 


.element ( 
text-shadow: 1px lpx 1px s$cccccc; 


} 
记 住 ， 阴 影 值 的 速记 规则 永远 是 先 向 右 再 向 下 。 因 此 ， 第 一 个 值 指 的 是 右 侧 阴影 的 大 小 ， 


第 二 个 值 指 的 是 下 方 阴 影 的 大 小 ， MORAN ( 即 阴 影 从 开始 变 淡 到 完全 
消失 的 距离 )， 最 后 一 个 值 是 阴影 颜色 。 








HEX、HSL 或 RGB 颜色 都 可 以 


阴影 颜色 不 一 定 非 得 是 十 六 进 制 值 ， 也 可 以 是 HSL(A) 或 RGB(A): 

text-shadow: 4px 4px Opx hsla(140, 3% 269, 0.4); 

但 要 注意 浏览 器 必须 得 同时 支持 HSL/RGB iif fl text- shadow 才能 泻 染 出 效果 。 考 虑 
到 浏览 器 兼容 性 ， 在 使 用 HSLA 或 RGBA 阴影 时 我 一 般 都 这 样 做 : 


text-shadow: 4px 4px Opx #404442; 
text-shadow: 4px 4px Opx hsla(140, 3% 269, 0.4); 


即 先 定义 一 个 使 用 十 六 进 制 颜色 的 阴影 C 作为 针对 老 版 本 浏览 器 的 备用 方案 )， 然 后 再 定 
义 一 个 使 用 HSLA 或 RGBA 颜色 的 阴影 。 














px. em 或 rem 都 行 


阴影 值 也 可 以 使 用 em 或 rem 单 位。 如 下 所 示 的 AND THE WINNER ISN'T 网 站 的 设 
计 图 : 
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AND THE WINNER IS 


WHY? — SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 





UNSUNG HEROES... EVERY YEAR 
- PÁG WHEN I WATCH THE 
i OSCARS I'M ANNOYED... 
full info ul info. ke King Kong. Moulin 
OVERHYPED NONSENSE... Rouge Munich 


$. 
» 2 
CTT 

AA into Pull into 








THESE SHOULD HAVE WON 5» 














在 Photoshop "P, EVERY YEAR 这 几 个 字 的 大 小 是 102 183, FHF dria 
因此 使 用 我 们 百 试 不 更 的 目标 元 素 尺寸 -+ 上 下 文 元 素 尺寸 = 百分比 尺寸 这 个 公式 来 计算 一 
F (4+102=.039215686 )， 结 果 如 下 : 

text-shadow: .039215686em .039215686em 0em 4dad7d7; /* 4 + 102 */ 


下 图 展示 了 浏览 需 中 的 效果 : 











VEVVEVNVEVYVYVEVYTTVYVYYYV | 
AND THE WINNER IS 
WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES Quiz 


"uv EVERY YEAR 
T WHEN ! WATCH THE 
Ed OSCARS I'M ANNOYED.. 
t films like PNG Kong: Moulin Rouge ind 





OVERHYPED NONSENSE... Munich ç e statue whilst the re 
| cinematic F ut. Not very 


Hi 
S t gs right 
BH . pes HAVE WON » 
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6.1.3 


我 个 人 其 实 很 少 用 em s rem 作为 阴影 大 小 的 单位 。 因 为 阴影 一 般 都 比较 小 ， 一 个 或 两 
个 像素 的 阴影 ， 在 所 有 视 口 中 的 效果 都 很 不 错 。 


取消 文字 阴影 


如 果 你 眼神 够 好 ， 就 会 发 现 右 侧 内 容 区 的 第 二 行文 字 ，WHEN I WATCH THE OSCARS 
PM ANNOYED.... ， 也 应 用 了 文字 阴影 。 原 因 如 下 : 


<hl>Every year <em>when | watch the Oscars l'm annoyed...</em></h1> 


当前 的 文字 阴影 效果 应 用 在 整个 chl > 标签 上 ( 该 标签 内 包含 <e m> 标 签 )， 所 以 我 们 需要 
取消 <e m> 标 签 上 的 text-shadow: 


#content hl em { 
font-family: 'BitstreamVeraSansRoman'; 
display: block; 
line-height: 1.052631579em; /* 40 + 38 */ 
color: #7157414; 
font-size: .352941176em; /* 36 + 102 */ 
text-shadow: none; 


} 
修改 后 的 效果 如 下 图 所 示 : 











a- qa $& D- -*- 
LE and the winner isme [+ wv 一 
AND THE WINNER IS 
WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


emm 14 EVERY YEAR 


WHEN | WATCH THE 
OSCARS I'M ANNOYED.. 
that films like Eng Kong, Moulin kauge ind 
Munich get the : whilst t 





cinematic heroes lose out. ! 





We're here t Jt things rignt 


THESE SHOULD HAVE WON » 





1049x878 











图 灵 社 区 会 员 lemoggy(lemoggy@foxmail.com) zz 尊重 版 权 


61 文字 阴影 139 





左上 方 阴影 
使 用 负 值 可 以 制作 出 左上 方 阴影 效果 ， 例 如 : 


text-shadow: -4px -4px 0px #dad7d7; 


效果 如 下 图 : 














， EVERY YEAR 


如 果 不 需 要 阴影 模糊 效果 , 可 以 将 text:shadow 的 第 三 个 值 ( 模糊 半径 ) 从 声明 中 删除 ， 
如 下 所 示 : 


text-shadow: -4px -4px #dad7d7; 


这 种 简写 假定 第 三 个 值 没 有 声明 ， 而 前 两 个 值 表示 阴影 偏 移 距离 。 











6.1.4 制作 浮雕 文字 阴影 效果 


我 一 直觉 得 text - shadow 最 适合 用 来 制作 浮雕 文字 。 这 种 效果 一 般 最 适合 应 用 在 非 日 色 
背景 的 深 色 文字 上 ， 搭 配 以 高 亮 颜 色 〈 如 纯 白 色 或 类 似 颜色 ) 的 阴影 。 我 们 来 给 网 站 的 
导航 链接 添加 浮雕 效果 试 试 : 


nav ul li a { 
height: 42px; am 
line-height: 42px; 


text-decoration: none; 

text-transform: uppercase; 

font-family: 'BebasNeueRegular'; 

font-size: 1.875em; /[*30 + 16 */ 

color: #000000; 

text-shadow: 0 1px 0 hsla(0, 0% 100% 0.75); 




















} 
AIR FEEDER, IUDEEA SURE P6 T ARE, OA EE 
阴影 ! 

STILLS/PHOTOS VIDEOS/CLIPS QUOTES 
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AL 


重 直 方向 设置 1 或 2 像素 的 “和 白 影 ” 即 可 。 





6.1.5 ”多重 文字 阴影 


6.2 








我 们 还 可 以 制作 多 重文 字 阴 影 ， 只 需 将 两 组 值 使 用 逗号 分 隔 开 即 可 ， 比 如 
text-shadow: Opx 1px #ffffff, 4px 4px Opx #dad7d7; 








想 要 最 好 的 浮雕 文字 效果 ， 我 有 诀窍 : 不 要 模糊 ， 不 要 水 平 阴影 ， 仅 在 


之 前 精妙 的 浮雕 效果 必 不 可 少 ， 否 则 文字 会 变 模糊 。 所 以 这 个 声明 合并 了 已 有 的 投影 效 








果 和 上 一 区 的 浮雕 效果 。 浏 览 锅 中 的 效果 如 下 图 所 示 : 


EVERY YEAR 

















gs 想 要 了 解 W3C 对 text-shadow 属性 的 标准 定义 ,请 参阅 http://www.w3. 
- org/TR/css3-text/Ztext-shadow ; 


盒 阴影 











掌握 了 文字 阴影 ， 盒 阴影 就 是 小 菜 一 矶 了 。 盒 阴影 的 语法 与 文字 阴影 完全 








移 距 离 、 垂 直 偏 移 距 离 、 模 糊 半 径 ， 以 及 阴影 颜色 : 
box-shadow: 0px 3px 5px #444444; 

















一 样 : 水 平 偏 


但 是 , 盒 阴 影 的 的 路 浏览 器 文 持 并 不 好 ， 所 以 明智 的 做 法 是 使 用 浏览 需 私 有 前 缀 ， 例 如 : 


-ms-box-shadow: Opx 3px 5px #444444; 
-moz-box-shadow: 0px 3px 5px #444444; 
-Wwebkit-box-shadow: Opx 3px 5px #444444; 
box-shadow: Opx 3px 5px #444444; 


我 们 来 给 AND THE WINNER ISN'T 网 站 侧 边 栏 的 电影 海报 加 点 阴影 效果 ; 


.SideBlock img ( 

max-width: 4595 

box-shadow: Opx 3px 5px #444444; 
} 


浏览 需 中 的 效果 如 下 : 
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6.2.1 





UNSUNG HEROES... 














内 阴影 


box-shadow 属性 可 以 用 来 制作 内 阴影 
来 制作 光 晕 效果 ， 如 下 所 示 : 


box-shadow:inset 0 0 40px #000000 


语法 和 之 前 的 盒 阴 影 差 不 多 ， 只 是 多 出 来 的 i nset 告诉 浏览 器 设置 内 阴影 效果 。 现 在 给 
«body > 标签 应 用 该 规则 , 为 整个 页 面 添加 光量 效果 , 这 样 就 会 让 页 面 的 四 周 都 出 现 阴影 。 
body { 

-moz-box-shadow:inset 0 0 30px #000000 


-webkit-box-shadow:inset 0 0 30px #000000 
box-shadow:inset 0 0 30px #000000 


出 现在 元 素 内 部 ， 而 不 是 外 部 。 内 阴影 可 用 











} 
浏览 器 中 的 效果 如 下 : 
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And the winner isn't. 
4» Go to a Web Site v @| (SY Google Qa) A BA- 


And the winner isn't... 





AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


P. <a EVERY YEAR 


WHEN | WATCH THE 
OSCARS I'M ANNOYED... 


that films like King Kong, Moulin Rouge 
OVERHYPED and Munich get the statue whilst the real 
NONSENSE... cinematic heroes lose out. Not very 
J^ Hollywood is it? 
We're here to put things right. 


THESE SHOULD HAVE WON » 


MOULIN ROUGE 


NOTE: OUR OPINION IS ABSOLUTELY CORRECT. YOU ARE WRONG, EVEN IF YOU THINK YOU ARE RIGHT. THAT'S A FACT. DEAL WITH IT. 








* 
1029x1037 











6.22 多重 阴影 


和 文字 阴影 一 样 ， 盒 阴影 也 可 以 有 多 重 阴影 效果 。 语 法 也 类 似 ， 即 将 两 组 值 用 逗号 分 开 ， 
这 样 两 组 阴影 就 会 按照 代码 中 的 先后 顺序 从 上 到 下 应 用 到 元 素 上 。 换 句 话 说， 就 是 代码 
中 先 声 明 的 规划， 在 浏览 右 中 会 覆盖 下 面 的 规则 。 
box-shadow: inset 0 0 30px hsl(0, 0% 0%), 

inset 0 0 70px hsla(0, 97% 539, 1); 
我 将 这 名 代码 添加 到 body E, 就 能 制造 出 一 种 神秘 的 粉红 闺房 效果 。 这 肯定 是 受 了 页 面 
上 的 《 红 磨 坊 》 海 报 图 片 的 影响 ! 
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And the winner isn't. 


4 » ij file:///Users/benfrain/Documents/Storage/articles/packt/responsiveCSS-HTMLS/ch& "c 4- Google Q)| 会 | | 四 -| | > 





AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


zem jg EVERY YEAR 


WHEN | WATCH THE 
OSCARS I'M ANNOYED... 


that films like King Kong, Moulin Rouge 


OVERHYPED and Munich get the statue whilst the real 
NONSENSE... 


cinematic heroes lose out. Not very 
Hollywood is it? 

DES ` Sis Were here to put things right. 
[EIS THESE SHOULD HAVE WON » 


NOTE: OUR OPINION IS ABSOLUTELY CORRECT. YOU ARE WRONG, EVEN IF YOU THINK YOU ARE RIGHT. THAT'S A FACT. DEAL WITH IT. 





1024x1037 














可 以 说 ， 本 节 的 讲解 简单 明了 。 这 也 恰恰 说 明了 CSS3 在 实现 设计 创意 方面 的 强大 能 力 。 
给 元 素 追 加 或 删除 视觉 效果 就 是 一 两 秒 钟 的 事 ， 根 本 不 需要 使 用 图 像 处 理 软件 。 








KW 想 要 了 解 W3C 对 box- shadow 属性 的 标准 定义 ,请 参阅 http://www.w3. 
- org/TR/css3-background/ftthe-box-shadow , 


背景 渐变 
在 没有 CSS3 的 时 候 , 如 果 想 做 一 个 背景 渐变 效果 , 就 得 使 用 一 个 很 细 的 渐变 切片 进行 水 
平 /垂直 平 铺 。 对 于 使 用 图 片 而 言 ， 这 确实 是 一 种 很 好 的 折 中 方案 。 一 张 仅 有 一 两 像素 宽 
的 图 片 ， 不 会 给 宽带 造成 太 大 负担 ， 而 且 它 可 以 用 在 网 站 的 多 个 元 素 上 。 
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6.3.1 线性 背景 渐变 


使 用 上 面 说 过 的 技巧 ， 来 给 AND THE WINNER ISN’  T 网 站 的 侧 边栏 制作 一 个 背景 渐变 
效果 : 


aside { 
border-right-color: £e8e8e8; 
border-right-style: solid; 
border-right-width: 2px; 
margin-top: 58px; 
padding-left: 1.595 
padding-right: 1.0416667*5 
margin-left: 1.0416667 5 
float: left; 
width: 20.708333395 
background: url(../img/sidebarBg2.png) 50% repeat-x; 





} 
浏览 需 中 的 效果 如 下 : 





UNSUNG HEROES... 


karike Onan hasn 


MOULIN ROUGE 














如 果 想 修改 渐变 效果 ， 还 得 使 用 图 像 编辑 软件 。 另 外 ， 内 容 可 能 因为 超出 固定 尺寸 限 制 
而 偶尔 溢出 渐变 背景 。 这 个 问题 在 响应 式 设计 中 简直 无 法 忍受 ， 因 为 我 们 想 让 页 面 结构 
能 随意 改变 形状 〈 比如 变 高 或 变 宽 )， 但 不 会 破坏 设计 效果 。 


例如 ， 假 设 我 想 给 侧 边栏 中 的 每 个 模块 再 追加 两 部 电影 。 效 果 如 下 : 
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效果 不 是 太 差 ， 但 灰色 渐变 没有 按照 我 喜欢 的 那样 覆盖 整个 侧 边栏 。 这 时 我 又 不 得 不 回 
图 像 编辑 软件 中 重新 制作 渐变 图 片 。 如 果 使 用 CSS3 渐变 ， 就 会 灵活 很 多 。 用 纯 CSS3 
就 可 以 做 出 和 上 面 一 样 的 渐变 ， 而 且 不 用 图 片 ， 代 码 如 下 : 

background: linear-gradient(90deg, #ffffff 09, #e4e4e4 50%, #ffffff 1009); 


在 支持 该 特性 的 浏览 需 中 ， 效 果 如 下 所 示 : 


ge 
七 一 
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不 论 这 块 区 域 有 多 高 ( 毕竟， 评分 差不多 的 好 电影 和 烂 电 影 有 很 多 )，CSS3 渐变 始终 能 
覆盖 整个 区 域 。 
背景 渐变 唯一 美中不足 的 是 它 不 像 其 他 一 些 CSS3 特性 那样 被 广泛 支持 。 比 如 IE 9 就 没 
有 对 它 的 原生 支持 ( 微软 承诺 在 IE 10 中 支持 )。 其 他 大 多 数 浏览 右 都 支持 背景 渐变 ， 不 
过 都 是 以 私有 前 绎 方式 。 不 过 这 并 不 足以 阻止 你 使 用 该 特性 来 增强 设计 效果 ， 因 为 有 很 
多 浏览 器 现在 已 经 支持 该 特性 ， 而 剩 下 的 浏览 器 在 不 久 的 将 来 也 会 支持 。 作 为 老 版 本 浏 
览 器 的 降级 方案 ， 最 好 先 定 义 一 个 固定 背景 颜色 ， 这 样 老 版 本 浏览 需 在 无 法 识别 渐变 规 
则 的 时 候 ， 至 少 会 泻 染 出 一 个 实 色 的 背景 。 
注意 : 过 去 曾 有 几 种 不 同 的 背景 渐变 语法 
R 过 去 ， 针 对 同样 的 背景 渐变 效果 ， 不 同 的 浏览 器 厂商 使 用 不 同 的 语法 来 
实现 。Webkit 是 这 个 问题 的 罪魁 祸首 , 不 过 庆幸 的 是 , 从 Safari 5.1 开始 ， 
Webkit 采用 了 和 Mozilla 一 样 的 做 法 一 也 就 是 W3C 公布 的 做 法 。 









































分 解 线性 渐变 语法 

线性 背景 渐变 语法 可 能 有 点 复杂 ， 所 以 我 们 对 其 做 一 个 分 解 : 

a 圆 括 号 中 的 第 一 个 值 ( 即 例 子 中 的 90deg, ， 可 选 ) 定义 了 渐变 的 方向 。 不 定义 该 值 则 
默认 是 一 个 垂直 从 顶部 到 底部 的 渐变 。 你 还 可 以 使 用 如 to top right 这 样 的 值 ， 这 
会 产生 一 个 朝向 右上 角 的 对 角 线 渐变 。 

口 下 一 个 值 (例子 中 的 ## fffff 0%) 定义 的 是 渐变 的 “起 点 ”， 包 括 起 点 的 颜色 和 位 置 。 
你 也 可 以 使 用 像 blue 20% 这 样 的 值 ， 这 样 就 是 从 蓝 色 开始 渐变 到 下 一 个 颜色 ， 而 渐 
变 开 始 位 置 则 位 于 假想 的 渐变 路 径 的 20% 处 。 同 样 ， 起 点 位 置 也 可 以 使 用 负 值 ， 这 样 
渐变 从 实际 可 见 区 域 之 外 就 开始 了 。 比 如 : 
background: linear-gradient(90deg, #ffffff -509, #e4e4e4 509, sffffff 1009); 
上 面 这 行 代码 意味 着 渐变 从 可 见 区 域 之 外 开始 ， 假 想 的 渐变 路 径 比 可 见 区 域 长 50%。 

口 下 一 个 值 指 的 是 “过 渡 颜 色 点 "。 我 们 来 回顾 一 下 : 沿 着 90 度 垂直 方向 ， 从 白色 开始 
((#ffffff 0%)， 向 位 于 渐变 路 径 50% 处 的 #e4e4e4 这 个 颜色 ( 浅 灰色 ) 渐变 。 这 里 
就 是 渐变 中 的 第 一 个 过 渡 颜 色 点 。 如 果 需 要 的 话 ， 可 以 在 渐变 “终点 ”之 前 定义 更 多 
的 过 渡 颜 色 点 〈 使 用 逗号 分 隔 )。 

口 圆 括号 中 的 最 后 一 个 值 始终 是 渐变 的 “终点 ”。 不 论 在 起 点 之 后 放置 了 多 少 个 过 渡 颜 色 


E 


















































想 要 了 解 线性 渐变 的 W3C 规范 ， 请 参阅 http//dev.w3.org/csswg/css3- 
images/flinear-gradients v 
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6.3.2 


径 向 背景 渐变 


CSS3 背景 渐变 不 只 局 限于 线性 渐变 ， 制 作 径 向 渐变 同样 简单 。 径 向 渐变 是 从 一 个 中 心 点 


开始 ， 依 据 椭圆 形 或 圆 形 进行 扩张 渐变 。 

径 向 背景 渐变 的 语法 如 下 所 示 : 

background: radial-gradient(center, ellipse cover, sffffff 729, sdddddd 100%) 
将 这 个 声明 追加 到 #cont ent 规则 中 ,产生 的 效果 如 下 图 所 示 : 


EVERY YEAR 


WHEN | WATCH THE OSCARS I'M 
ANNOYED... 
that films like King Kong, Moulin Rouge and Munich get the statue 





whilst the real cinematic heroes lose out. Not very Hollywood is it? 
We're here to put things right. 
THESE SHOULD HAVE WON > 














看 到 页 面 四 角 慢 慢 变 暗 的 效果 了 吧 ? 这 就 是 径 向 渐变 。 我 们 来 对 其 做 一 个 语法 分 解 ， 看 





看 它 是 如 何 运 作 的 。 


分 解 径 向 渐变 语法 





在 background 属性 之 后 ， 我 们 设 定 的 值 是 radi al - gradi ent (而 不 是 |i near- gradi ent ) 
然后 在 圆 括号 中 设 定 起 点 。 在 上 一 节 的 例子 中 我 们 用 的 是 cent er ， 其 实 也 可 以 使 用 如 
25px 25px 这 样 的 值 ， 这 就 表示 从 距 元 素 上 边 和 左边 均 为 25 像素 的 那个 点 开始 渐变 。 








例如 : 


background: radial-gradient(25px 25px, ellipse cover, #ffffff 72%, #dddddd 100%) 
这 行 代码 产生 的 效果 如 下 图 所 示 : 
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EVERY YEAR 


WHEN | WATCH THE OSCARS I'M 
ANNOYED.. 
ke King Kong, Moulin Hauges j Munich get the statue 


THESE SHOULD WAVE WON > 














中 心 点 距离 元 素 上 边 和 左边 均 为 25 像素 ， 然 后 向 四 周平 滑 辐 射 。 
声明 中 的 下 一 个 值 更 简单 ， 它 指 的 是 径 向 渐变 的 形状 和 大 小 : 
background: radial-gradient(center, ellipse cover, #ffffff 72%, sdddddd 1009); 


渐变 形状 要 么 是 circle (同形 ,渐变 会 均匀 地 向 各 个 方向 辐射 )， 要 么 是 el1ipse( 椭 
圆 形 ， 在 不 同 的 方向 辐射 量 不 同 )。 而 渐变 形状 的 大 小 则 有 很 大 的 灵活 性 ， 大 小 值 可 以 是 
下 列 任何 一 种 。 

Qclosest-si de: (渐变 形状 是 圆 形 时 ) 以 距离 中 心 点 最 近 的 一 边 为 渐变 半径 ,或 者 ( 渐 

变形 状 是 椭圆 形 时 ) 以 距离 中 心 点 最 近 的 水 平 或 垂直 边 为 渐变 半径 。 

Dclosest-corner : 以 距离 中 心 点 最 近 的 一 角 为 渐变 半径 。 

Dfarthest-side: 和 closest-side 正好 相反 (渐变 形状 是 圆 形 时 ) 以 距离 中 心 点 
最 远 的 一 边 为 渐变 半径 ， 或 者 〈 渐变 形状 是 椭圆 形 时 ) 以 距离 中 心 点 最 远 的 水 平 或 垂 
直 边 为 渐变 半径 。 

Dfarthest-corner: 以 距离 中 心 点 最 远 的 一 角 为 渐变 半径 。 

Dcover: 和 farthest-corner 完全 一 样 。 

Qcontain: 和 closest-side 完全 一 样 。 


接 下 来 是 定义 渐变 起 点 、 过 渡 颜 色 点 以 及 终点 〈 这 部 分 和 线性 渐变 是 一 样 的 )。 
例如 ， 我 们 将 之 前 的 规则 改 成 如 下 这 样 : 


background: radial-gradient(20px 20px, circle cover, 
hsla(9,6995 85% 0.5) 0%, 
hsla(9,769*, 63%, 1) 50%, 
hsla(10,989*, 46%, 1) 51%, 
hsla(24,10095 50%, 1) 75%, 
hsla(10,1009, 3995, 1) 100%); 


可 以 看 到 ,我 们 是 以 距离 左边 和 上 边 均 为 20 BR BO pou, BEIHIRDEWIAE, 渐变 半 
AERE st RA JUR o CER, HER T ZH HSL(A) 的 过 渡 颜 色 点 。 效 果 如 下 : 
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这 效果 从 美学 角度 讲 确实 不 敢 恭 维 , 但 我 希望 这 能 说 明 使 用 纯 CSS3 制作 视觉 效果 的 无 穷 


[st 


3 





想 要 了 解 W3C 对 背景 渐变 的 标准 定义 ， 请 参阅 http;//dev.w3.org/csswg/ 


css3-images/#radial-gradients。 


制作 完美 CSS3 渐变 的 简便 方法 

如 果 写 出 一 个 CSS3 渐变 对 你 来 说 有 点 难度 ， 那 你 可 以 考虑 使 用 在 线 渐 
变 生 成 器 。 我 个 人 最 喜欢 的 渐变 生成 器 是 http://www.colorzilla.com/ 
gradient-editor/., 它 的 用 户 界 面 风格 很 像 图 像 处 理 软件 ,你 可 以 选择 颜色 、 
过 渡 点 、 渐 变 风格 (线性 渐变 或 径 向 渐变 )， 甚 至 可 以 选择 自己 喜欢 的 
颜色 空间 (HEX、RGB(A)、HSL(A) )。 这 个 在 线 渐变 生成 器 还 会 加 载 一 
些 预 置 的 渐变 供 你 选用 和 修改 。 如 果 这 些 还 不 足以 打动 你 ， 须 知 它 还 提 
供 了 可 选 的 代码 设置 ， 用 来 修正 9， 让 它 显示 渐变 效果 ， 而 且 还 为 老 
版 本 浏览 器 提供 了 备用 的 背景 颜色 。 还 是 不 动心 ?9 它 还 能 基于 已 有 的 图 
片 直接 生成 渐变 ， 这 个 功能 怎么 样 ?9 我 想 这 下 总 该 打动 你 了 。 


6.3.3 重复 渐变 
CSS3 还 可 以 让 我 们 制作 重复 背景 渐变 效果 。 我 们 来 看 看 如 何 实现 : 


background: 


repeating-linear-gradient(90deg, #ffffff Opx, hsla(0, 1% 509,0.1) 5px); 


在 侧 边栏 上 应 用 后 的 效果 如 下 : 
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首先 给 1inear-gradient zkradial-gradient 前 面 加 一 个 前 级 “repeating”,， 后 面 的 
语法 和 普通 渐变 一 样 。 此 处 我 在 白色 和 灰色 过 渡 颜 色 点 之 间 使 用 了 像素 距离 (分 别 是 0px 
和 5px )， 百 分 比 也 可 以 。 为 了 达到 最 好 效果 ， 建 议 在 同一 个 渐变 中 使 用 相同 的 度量 单位 
(像素 或 百分比 )。 
我 们 来 试 着 写 一 个 重复 径 向 渐变 : 
background: repeating-radial-gradient(2px 2px, ellipse, 

hsla(0,09, 1009, 1) 2px, hsla(0, 0%, 959, 1) 10px, 

hsla(0,09, 93%, 1) 15px, hsla(0,095 100%, 1) 20px); 
语法 和 之 前 标准 的 径 向 渐变 相似 。 我 只 是 修改 了 渐变 起 点 , 删除 了 此 处 不 需要 的 “cover” 
值 ， 然 后 给 每 个 过 渡 颜 色 点 设置 了 像素 距离 。 例 子 中 的 终点 距离 是 20 像素 ， 所 以 渐变 
每 20 像素 就 会 重复 一 次 。 应 用 在 body 上 的 效果 如 下 图 所 示 。 我 先 警 告 你 一 一 效果 不 
好 看 ! 
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6.4 





vea- ar D- r: 





And the winner isn't. -| 


VN: 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES — QUIZ 


EVERY YEAR 


WHEN | WATCH THE 
PAP rr) I'M ANNOYED... 
at films like King Kong, Moulin 


UNSUNG HEROES... 


Rouge ar 'Minicf ad the statu 
whilst the real cinematic heroes lose 
out Not very Hollywood is it? 


We're here to put things right. 


THESE SHOULD HAVE WON > 











934x1119 








css3-images/#repeating-gradients v 


| JS 想 要 了 解 W3C 对 重复 渐变 的 标准 定义 ， 请 参阅 http://dev.w3.org/csswg/ 


另外 ， 还 有 一 种 使 用 背景 渐变 的 方法 ， 我 很 想 分 享 给 你 。 


背景 渐变 图 案 








我 发 现 自己 经 常 使 用 精妙 的 线性 渐变 ， 而 很 少 使 用 径 向 渐变 和 重复 渐变 。 当 然 ， 到 底 用 
什么 渐变 取决 于 设计 需要 。 一 些 聪明 的 家 伙 已 经 将 这 些 背 景 渐变 技巧 收集 起 来 整理 成 了 
背景 渐变 模式 。 我 们 来 看 一 个 例子 ， 将 刚才 给 body 设置 的 重复 渐变 替换 为 下 面 的 样式 : 


body { 
background-color:white; 
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background-image: 


radial-gradient(hsla(0, 0%, 87% 0.31) 9px, transparent 10px), 
repeating-radial-gradient(hsla(0, 0%, 87% 0.31) 0, 
hsla(0, 0%, 87% 0.31) 4px, transparent 5px, 
transparent 20px, hsla(0, 09, 87% 0.31) 21px, 
hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, 
transparent 50px); 


background-size: 30px 30px, 90px 90px; 
background-position: 0 0; 


浏览 需 中 的 效果 如 下 图 : 








And the winner isn't 








EY YYYYYYY | 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES — QUIZ 


EVERY YEAR 


WHEN | WATCH THE 
OSCARS I'M ANNOYED... 


that films like King Kong, Moulin 


UNSUNG HEROES... 


Rouge and Munich get the statue 
whilst the real cinematic heroes lose 





out. Not very Hollywood is it? 


OVERHYPED 
NONSENSE... 


We're here to put things right. 
THESE SHOULD HAVE WON > 





934x1119 
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6.5 


看 起 来 不 错 吧 ? 仅 用 几 行 代码 , 我 们 就 用 刚才 学 习 的 背景 渐变 技巧 做 出 了 一 个 可 修改 的 、 
灵活 的 背景 图 案 。 
CSS 高 手 Lea Verou 收集 了 一 系列 CSS3 背景 渐变 图 案 ， 具 体 请 见 http:Wlea.verou.me/ 


css3patterns/; 





4 ^ Ej ie veroume tter žre 4- aA D -*- 
LEA cs53 patterns Catey [+ - 


1434 EDET 


^" A CSS3 Patterns Gallery 


Click on a pattern to expand » Textareas are editable » Browser support = Submit a new one » Github repo * Enjoy! 


T 


È Upholstery (939 B) Starry night (475 B) 
by Natr tegle 


Rainbow bokeh (1.05 KB) & Carbon (497 B) Carbon fibre (313 B) 
by Auke Zwart by Atle Mo limig) Suum ln Comm Iry Atie Mo (Ah Laa Vrena ioia) 
(coda) 








1242x3042 











CSS3 的 响应 性 


请 大 家 务必 记 住 ， 我 们 可 以 针对 不 同 的 视 口 使 用 不 同 的 声明 。 例 如 ， 针 对 较 小 的 视 口 可 
以 继续 使 用 上 一 节 中 的 渐变 图 案 : 
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And the winner isn't 


Go to a Web Site ve- 








会 D- |- 


And the winner isn't... 


vVVVVVVV *T - =s 
AAAAAA AA 

AND THE WINNER IS 
WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QU 


EVERY YEAR 


WHEN | WATCH THE OSCARS 
I'M ANNOYED... 

that films like King Kong, Moulin Rouge and 
Munich get the statue whilst the real cinematic 





heroes lose out. Not very Hollywood is it? 
We're here to put things right. 


THESE SHOULD HAVE WON > 


UNSUNG HEROES... OVERHYPED NONSENSE... 


RoserT Dr Nino — CHARLES Grom 








768x1155 














但 针对 大 视 口 ( 例如 宽度 大 于 等 于 768 像素 的 视 口 ), 可 以 不 继续 使 用 上 图 中 的 渐变 图 案 。 
因此 可 以 使 用 媒体 查询 为 大 视 口 设 定 一 个 具体 规则 : 


@media screen and (max-width: 768px) { 
body { 
background-color:white; 
background-image: 
radial-gradient(hsla(0, 0%, 87% 0.31) 9px, transparent 10px), 
repeating-radial-gradient(hsla(0, 0%, 87% 0.31) 0, 
hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, 
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hsla(0, 09, 87%, 0.31) 21px, hsla(0, 09, 87% 0.31) 25px 
transparent 26px, transparent 50px) 
background-size: 30px 30px, 90px 90px 
background-position: 0 0; 
| } 
请 时 刻 牢记 ， 只 要 你 有 需要 ， 媒 体 查询 就 能 让 你 给 任何 元 素 针对 各 种 不 同 视 口 设 定 具 体 
规则 。 这 样 做 都 是 为 了 给 用 户 提供 最 佳 的 使 用 体验 。 
使 用 CSS 预 处 理 器 轻松 编写 CSS3 代码 
CSS3 规则 目前 都 需要 各 种 不 同 的 浏览 器 私有 前 级 。 除 了 将 各 种 声明 的 不 
同 前 级 写法 保存 为 代码 片段 ， 或 者 使 用 JavaScript 文件 来 自动 追加 前 组 
之 外 ， 还 有 一 种 快速 编写 CSS3 代码 的 方法 ， 就 是 使 用 CSS 预 处 理 器 ， 
M 如 最 流行 的 SASS 和 LESS。 比如 使 用 支持 SASS 的 Compass 插件 , 编写 
Q -NE ARRA: element { Gi nclude box-shadow; }o 
当 最 终生 成 CSS 代码 时 ， 代 码 中 会 包含 一 组 完整 的 浏览 器 私有 规则 ， 并 
包含 针对 Internet Explorer 的 hack (如 果 需 要 的 话 )。 如 果 这 还 不 足以 打 
动 你 ， 那 再 想 想 这 种 预 处 理 器 能 够 让 你 在 CSS 中 使 用 变量 和 if/jwhile 
这 样 的 编程 语句 。 欲 了解 更 多 信息 ， 请 前 往 SASS 的 网 站 http://sass- 
lang.com f LESS 的 网 站 http://lesscss.org o 














组 合 使 用 CSS3 属性 


之 前 ， 我 们 主要 学 习 了 各 种 CSS3 特性 的 一 般 用 法 。 下 面 我 们 将 组 合 这 些 特性 来 制作 
THESE SHOULD HAVE WON>> 这 个 超 链 接 的 效果 。 在 AND THE WINNER ISN'T 网 站 
的 原始 设计 图 中 ， 该 链接 按钮 的 文字 使 用 的 是 自 定义 字体 ， 这 点 我 们 已 经 在 第 5 章 处 理 
过 。 除 此 之 外 ， 该 链接 按钮 还 有 一 个 红色 的 渐变 背景 ， 使 用 了 圆 角 效果 并 有 一 点 阴影 。 
该 超 链接 目前 的 样式 如 下 : 


#content a ( 
text-decoration: none; 
font: 2.25em /* 36px + 16 */ 'BebasNeueRegular'; 























} 

H, REREN RNR REG ENAN ETA ERE, CE 
少 也 可 以 有 一 个 红色 的 背景 。 此 处 我 会 刻意 使 用 十 六 进 制 颜色 值 ， 因 为 如 果 老 版 本 浏览 
器 不 识别 渐变 的 话 ， 那 它 也 不 可 能 文 持 RGB 和 HSL 颜色 模式 : 

#content a ( 


text-decoration: none; 
font: 2.25em /* 36px + 16 */ 'BebasNeueRegular'; 
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background-color: £b01c20; 
} 





接 下 来 添加 圆 角 效 果 。 此 处 及 后 续 章 节 中 都 请 注意 ， 我 在 代码 示例 中 添加 的 所 有 CSS3 
属性 ， 一 般 都 需要 设 定 浏览 器 私有 前 级 ， 为 简洁 起 见 我 在 此 处 省 略 了 前 级 : 


#content a { 
text-decoration: none; 
font: 2.25em /* 36px + 16 */ 'BebasNeueRegular'; 
background-color: £b01c20; 
border-radius: 8px; 





} 
截至 目前 我 们 做 出 的 效果 如 下 : 

















接 下 来 ， 将 文字 颜色 改 为 白色 ( 再 强调 一 次 ， 我 想 确保 在 老 版 本 浏览 器 中 也 看 到 同样 效 
AR. 所 以 此 处 使 用 了 简单 但 兼容 的 颜色 定义 ), 然后 设置 一 定 的 内 边 距 ( 也 可 以 使 用 百 分 
比值 ) 以 便 让 文字 四 边 都 有 一 定 的 间距 : 


#content a { 
text-decoration: none; 
font: 2.25em /* 36px + 16 */ 'BebasNeueRegular'; 
background-color: £b01c20; 
border-radius: 8px; 
color: white; 
padding: 30px; 
} 


至 此 效果 如 下 : 





heroes lose out. Not very Hollywood is it? 


THESE SHOULD HAVE WON > 














此 时 , 添加 内 边 距 导 致 链接 上 方 的 文字 被 盖 住 了 , 所 以 我 们 给 其 追加 一 个 float :1eft ， 
同时 设置 背景 渐变 : 
#content a { 

text-decoration: none; 


font: 2.25em /* 36px + 16 */ 'BebasNeueRegular'; 
background-color: #b01c20; 
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border-radius: 8px; 

color: white; 

padding: 30px; 

float: left; 

background: linear-gradient(90deg, £$b01c20 0%, #f15c60 100%) 
} 


现在 看 起 来 有 点 模样 了 : 





heroes lose out. Not very Hollywood is it? 
We're here to put things right. 





THESE SHOULD HAVE WON > 











之 后 再 追加 一 点 上 边 距 ， 设 置 一 下 阴影 效果 : 


$content a ( 
text-decoration: none; 
font: 2.25em /* 36px + 16 */ 'BebasNeueRegular'; 
background-color: £b01c20; 
border-radius: 8px; 
color: white; 
padding: 30px; 
float: left; 
background: -moz-linear-gradient(90deg, #b01c20 09, s$f15c60 100%); 
margin-top: 30px 
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667% 0.8); 
} 


再 在 浏览 器 中 查看 一 下 ， 效 果 已 经 差不多 了 : 











We're here to put things right. 














THESE SHOULD HAVE WON > 
接 下 来 ， VINOS DM QM 的 日 边 ， 始 daos 文 些 效果 ， 
但 加 上 之 后 会 带 来 些许 浮雕 效果 。 这 , 能 在 工作 





中 轻松 快速 地 做 出 适当 调整 


#content a { 
text-decoration: none; 
font: 2.25em /* 36px + 16 */ 'BebasNeueRegular'; 
background-color: £b01c20; 
border-radius: 8px; 
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color: white; 
padding: 30px; 
float: left; 
background: -moz-linear-gradient(90deg, £b01c20 0% #f15c60 1009) 
margin-top: 30px; 
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667% 0.8) 
text-shadow: Opx 1px black; 
border: 1px solid £bfbfbf; 
} 


现在 我 们 的 按钮 在 Firefox 8 中 的 效果 如 下 : 





We're here to put things right. 


THESE SHOULD HAVE WON » 














还 有 最 后 一 个 问题 ， 原 始 设 计 图 中 的 那 两 个 尖 括 号 ( 即 HTML 中 的 &r aquo，) 使 用 了 与 
按钮 文字 不 一 样 的 字体 。 但 在 此 处 为 这 么 一 个 特殊 符号 专门 引入 一 种 字体 不 太 划算 ， 所 
以 我 准备 将 这 个 符号 用 一 个 内 联 标 签 包 右 起 来 ， 然 后 增 大 它 的 字号 。 修 改 后 的 标签 代码 
如 下 : 


«a href="#">these should have won <span>&raquo; </span></a> 


用 来 修正 字体 大 小 的 对 应 CSS 代码 如 下 : 


#content a span { 
font-size: 1.3em 





We're here to put things right. 


THESE SHOULD HAVE WON » 














使 用 CSS3 蔡 代 图 片 来 实现 这 种 效果 ， 最 赞 的 地 方 在 于 ， 可 以 在 超 链接 中 包含 任何 内 容 ， 
而 它 的 效果 依然 保持 完美 : 
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s íbesfriin/Documerti /Seorgge / arces /packt/respomiveCSS-HTMLS/cHE/code)bas sa * It- 2 * D- 





Ard the winner nort 


| YOU 
AND THE WINNERIS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEDS/CLIPS QUOTES Quiz 


1, EVERY YEAR 


WHEN | WATCH THE OSCARS I'M 
ANNOYED... 


that films like King Kong, Moulin Rouge a 





Munich get the statue whilst the 1 


THESE SHOULD HAVE WON BUT INSTEAD SOME HOPELESS WEEPIE OR 


SINGING OR DANCING TRAVESTY CLINCHED IT >> 














多 重 背 景 图 片 
有 一 种 很 常见 的 设计 需求 ， 就 是 制作 一 个 顶部 和 底部 使 用 不 同 背景 图 片 的 页 面 。 或 者 也 
可 能 是 要 求 页 面 内 的 某 个 内 容 模块 的 顶部 和 底部 使 用 不 同 的 背景 图 片 。 这 个 需求 看 起 来 
很 简单 ， 使 用 CSS 可 以 轻松 地 做 出 这 种 效果 。 但 是 使 用 CSS 2.1 来 制作 这 种 效果 往往 需 
要 额外 的 标签 。 例 如 ， 在 使 用 CSS3 之 前 ， 我 解决 该 问题 的 一 贯 方法 如 下 : 
«body classz'headerBackgroundHere'» 
«div classz'footerBackground'» 
«div id="container"> 
«header» 
Il RAS 
«[ header» 
«div idz'main" rolez'main'» 
I] 主 内 容 
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«I di v» 
«footer» 
11 页 脚 内 容 
«[footer» 
«| di v» 


</div> «l--! end of .footerBackground --> 


«| body» 


你 会 看 到 整个 内 容 区 域 (也 就 是 id Jy container 的 div) 被 包 于 在 一 个 类 名 为 
footerBackground 的 div 中 。 有 了 这 样 的 代码 结构 ,我 们 就 可 以 先 给 body 设 定 一 个 
CSS 规则 ， 用 来 设置 页 面 顶部 的 背景 图 片 : 


body { 
background-image: url("../img/topSlice.png"); 
background-repeat: repeat-x; 








} 
然后 再 给 footerBackground 设 定 CSS 规则 。 此 处 用 来 放置 页 面 底部 的 背景 图 片 : 


.footerBackground ( 
background-image: url("../img/ bottomSlice.png'); 
background-repeat: repeat-x; 
background-position: bottom 








} 
这 种 方法 非常 好 用 且 基 本 兼容 所 有 浏览 器 。 但 是 我 一 向 不 赞成 仅 为 解决 表现 问题 而 增加 
额外 的 标签 。 

HA T CSS3, 我 们 可 以 轻松 解决 这 个 问 题 了 。 因 为 CSS3 允许 为 一 个 元 素 设 定 多 重 背 
Ax (多重 背 景 是 CSS3 背景 和 边框 模块 的 一 部 分 )。 除 了 TES 及 更 低 版 本 外 ， 其 他 浏览 带 
均 文 持 该 特性 。 语 法 如 下 : 


background: 





























url('../img/1.png'), 
url('../[img/2.png'), 
url(*../img/3. png' ); 





和 多 重 阴影 的 排列 顺序 一 样 ， 排 在 最 前 面 的 图 片 在 浏览 器 中 显示 时 会 覆盖 在 最 上 面 。 你 
还 可 以 在 声明 中 追加 背景 颜色 ， 像 下 面 这 样 : 


background 


url('../img/ 1. png' ), 
url('../img/ 2. png' ), 
url('..[img/3.png') left bottom, black 














将 颜色 定义 在 最 后 ， 这 样 背 景色 就 会 显示 在 所 有 背景 图 片 的 下 面 。 


不 支持 多 重 背 景 规则 的 浏览 器 (如 下 8 及 更 低 版 本 ) 会 会 直接 忽略 整 条 规则 。 所 以 你 可 以 
在 CSS 多 重 背景 规则 之 前 再 添加 一 条 普通 背景 规则 来 作为 针对 老 版 本 浏览 器 的 备用 方案 
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使 用 多 重 背景 图 片 时 ， 如 果 你 使 用 了 透明 的 PNG 图 片 ， 那 透 过 任何 释放 在 其 他 图 片 之 上 
的 透明 图 片 都 可 以 看 到 下 面 的 图 片 。 但 是 背景 图 片 不 一 定 非 要 受 放 在 另 一 个 背景 图 片 之 
上 ， 图 片 大 小 也 不 用 完全 一 样 。 

















6.7.1 背景 图 片 大 小 


要 设置 每 个 背景 图 片 的 大 小 ， 使 用 backgr ound- size 属性 。 使 用 多 重 背景 时 ， 其 语法 
如 下 : 


background-size: 100% 50%, 300px 400px, auto; 


规则 中 声明 了 每 张 背 景 图 片 的 大 小 〈 先 是 宽度 ， 再 是 高 度 )， 多 组 值 之 间 使 用 逗号 分 隔 ， 
按照 背景 属性 中 图 片 的 顺序 对 应 排列 。 如 上 面 的 代码 ， 图 片 大 小 值 可 以 使 用 百分比 或 像 
素 值 ， 以 及 如 下 几 个 预定 义 值 : 

Qauto: 使 用 图 片 的 原始 大 小 ; 

Dcover : 按照 原始 图 片 的 长 宽 比 缩放 图 片 以 填充 整个 元 素 区 域 ; 

Dcontain: 按照 原始 图 片 的 长 宽 比 缩放 图 片 以 使 其 较 长 的 一 边 适 应 元 素 大 小 。 















































672 ”背景 图 片 位 置 
男 外 还 可 以 给 不 同 的 背景 图 片 设置 不 同 的 位 置 。 我 们 可 以 这 样 做 : 


background: 
url('../img/1.png') center, 
url('..[img/ 2.png' ), 
url('..[img/3.png') left bottom, black; 


上 例 中 的 第 二 张 图 片 没有 声明 背景 位 置 ， 因 此 会 使 用 默认 位 置 top left, 

















6.7.3 ”背景 属性 的 缩写 语法 


可 以 使 用 缩写 语法 将 各 种 背景 属性 组 合 起 来 。 但 是 以 我 的 经 验 看 ， 这 样 会 产生 捉摸 不 定 
的 结果 。 所 以 我 更 倾向 于 使 用 普通 写法 ， 先 声明 多 重 背 景 图 片 ， 然 后 声明 背景 大 小 ， 最 
后 声明 背景 位 置 。 
































W3C 有 关 多 重 背 景 的 文档 ， 请 参阅 此 处 : http//www.w3.org/TR/css3- 
background/#layering 。 W3C N 关 背 景 大 小 的 文档 ， 请 参阅 此 处 : 
http://www.w3.org/TR/css3-background/fthe-background-size , W3C 有 关 背 
景 位 置 的 文档 ， 请 参阅 此 处 : http://www.w3.org/TR/css3-background/ 
#the-background-position。 
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6.8 更 多 CSS 特性 


6.9 




















到 现在 为 止 , 我 们 只 讲解 了 一 小 部 分 CSS3 特性 。 但 是 , 这 一 部 分 是 在 现实 世界 中 最 有 用 
处 的 。 同 时 ， 我 认为 这 些 特性 也 是 在 响应 式 设计 中 用 来 高 效 灵活 地 制作 视觉 效果 的 最 有 
效 手段 。 不 过 , 你 应 该 一 如 既往 地 关注 除 我 们 所 见 的 这 片 “ 小 树林 ”之 外 的 更 广阔 的 CSS3 
“森林 ”， 这 其 中 必 有 一 些 东 西 能 激 起 你 的 兴 








可 缩放 图 标 : 响应 式 设计 中 的 完美 选择 


聪明 的 人 们 已 经 用 CSS3 实现 了 很 多 超 棒 的 效果 。 其 中 有 一 个 我 非常 喜欢 且 现 在 经 常 使 用 
的 技巧 就 是 @f ont - face 图 标 。 

你 可 能 会 疑惑 :“ 这 是 什么 东西 ? ”好奇 的 朋友 ， 让 我 来 告诉 你 。 还 记得 我 们 在 上 一 章 中 
使 用 CSS3 的 @f ont - f ace 来 给 网 页 应 用 自 定义 字体 吗 ?@f ont :face 图 标 就 是 将 字符 做 
成 常用 图 标的 特定 字体 。 以 往 我 们 都 是 使 用 很 多 单独 的 图 标 图 片 ， 或 者 将 图 标 图 片 组 合 
成 一 张 很 大 的 雪 珀 图 ， 而 @f ont - face 图 标 则 可 以 让 你 只 用 一 种 字体 就 涵盖 所 有 要 用 的 
图 标 ( 这 样 就 只 需要 一 个 http 请 求 ， 唔 哈哈 ! )。 另 外 ， 因 为 使 用 的 是 字体 ， 所 以 图 标 就 
可 以 完美 缩放 了 一 一 这 与 响应 式 设 计 真 可 谓 天 作 之 合 。Fico 上 就 有 很 好 的 @f ont -face 
图 标 ， 详 情 请 见 http://fico.lensco.be/。 
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6.10 


小 结 


章 讲解 了 CSS3 的 很 多 新 特性 。CSS3 渐变 背景 让 我 们 可 以 使 用 纯 代码 来 制作 非常 好 看 
的 背景 效果 , 甚至 可 以 设计 出 背景 图 案 。 我们 还 学 习 了 如 何 使 用 text - shadow 来 制作 浮 
雕 文字 ， 还 学 习 了 如 何 使 用 box- shadow 来 给 元 素 的 外 部 和 内 部 添加 阴影 效果 。 


在 响应 式 设 计 中 , 使 用 纯 CSS3 来 制作 这 些 视 觉 效 果 还 会 带 来 额外 好 处 , 这 意味 着 元 素 效 
果 不 会 像 以 往 使 用 图 片 那样 既 费 宽带 又 难 维护 。 当 然 ， 有 时 使 用 图 片 是 不 可 避免 的 ,但 
CSS3 为 我 们 提供 了 非常 大 的 灵活 性 。 例 如 ， 本 章 我 们 使 用 CSS3 多 重 背 景 图 片 给 页 面 添 
加 了 多 重 背 景 ,并 分 别 指定 了 背景 图 片 位 置 。 这 一 技术 结束 了 必须 使 用 额外 标签 的 历史 。 
男 外 ,我们 使 用 这 些 特性 来 给 响应 式 设计 添加 了 一 些 酷 炫 的 效果 ， 在 现代 浏览 器 中 ， 不 
论 视 口 大 小 ， 都 可 尽情 享受 这 些 精妙 的 效果 和 美感 。 但 在 恼人 的 老 版 本 浏览 器 如 Internet 
Explorer 中 ， 无 法 演 染 这 些 效果 ， 不 过 问题 倒 也 不 严重 。 

截至 目前 , 我 们 对 CSS3 特性 的 探索 都 停留 在 静态 效果 上 : 将 页 面 上 的 元 素 排 列 在 某 个 国 
定位 置 ， 并 保持 一 种 固定 状态 。 其 实 ，CSS3 还 可 以 做 更 多 事情 。 下 一 章 ， 我 们 将 学 习 
把 一 个 元 素 从 一 种 状态 转换 到 另 一 种 状态 的 方法 ， 并 且 探 索 CSS 此 前 从 未 涉及 的 领域 : 
动画 。 
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在 前 面 两 章 中 , 我 们 学 习 了 一 些 CSS3 的 新 特性 和 新 功能 。 不 过 到 目前 为 止 , 我 们 看 到 的 
所 有 效果 都 是 静态 的 。 其 实 CSS3 能 做 的 远 不 止 于 此 。 

目前 的 情况 是 ， 如 果 页 面 上 需要 一 些 动画 效果 ， 要 么 你 自己 编写 JavaScript， 要 么 使 用 
JavaScript 框架 ( 如 jQuery ) 来 提高 效率 。 但 是 ， 一 些 熟悉 CSS3 的 同志 早 就 看 不 惯 动 不 
动 就 用 JavaScript 的 做 法 了 ， 他 们 正 想 方 设法 收复 失地 。 虽 然 CSS3 不 可 能 在 短期 内 取代 
jQuery 或 类 似 的 框架 ， 但 它 完 全 有 能 力 做 一 些 如 平滑 过 渡 (C 比如 在 鼠标 悬 停 时 ) 和 在 屏 
幕 上 移动 元 素 之 类 的 事情 。 这 对 我 们 来 说 是 个 好 消息 ， 它 意味 着 在 越 来 越 多 支持 现代 浏 
览 器 的 设备 中 ， 我 们 可 以 使 用 CSS 替代 JavaScript 实现 动画 效果 。 好 吧 ， 我 的 意思 是 : 
你 完全 可 以 从 “ 待 办 事项 ”中 将 “学 习 如 何 使 用 jQuery 制作 动画 效果 ”这 项 划 掉 ， 因 为 
Fist CSS 能 完成 同样 有 趣 的 效果 。 和 之 前 一 样 ， 不 支持 这 些 特性 的 浏览 器 不 会 受到 任何 
影响 ， 它 们 会 自动 跳 过 无 法 识别 的 规则 ， 就 好 像 这 些 代码 根本 不 存在 一 样 。 

本 章 内 容 

口 什么 是 CSS3 过 渡 以 及 如 何 使 用 它 

口 如 何 编写 CSS3 过 渡 以 及 它 的 缩写 语法 

口 CSS3 过 渡 时 间 函 数 (ease, cubic-bezier 等 ) 

口 响应 式 网 站 中 有 趣 的 过 滤 效 果 

口 什么 是 CSS3 变换 以 及 如 何 使 用 它 

口 理解 不 同 的 2D 变换 (scale 、rotate 、Skew, translate 等 ) 

口 尝试 3D 变换 

a css3 动画 效果 ( 使 用 关键 帧 ) 































































































什么 是 CSS3 过 渡 以 及 如 何 使 用 它 


我 们 在 给 超 链接 设置 样式 时 ， 一 般 都 会 设置 一 个 悬 停 状态 (hover) 的 效果 ， 这 种 方法 能 
明显 地 提醒 用 户 他 的 鼠标 指向 的 是 一 个 超 链接 。 虽 然 对 越 来 越 多 的 触摸 屏 设备 没 太 大 用 
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处 ， 但 不 管 怎么 说 ， 这 种 方法 对 网 站 和 用 户 之 间 的 交互 是 非常 简单 实用 的 。 


通常 ， 使 用 CSS 时 悬 停 状态 就 是 一 个 开关 。 它 默认 有 一 个 状态 ， 然 后 在 鼠标 悬 停 时 马上 
切换 到 另 一 种 状态 。 但 是 使 用 CSS3 过 渡 , 正如 其 名 字 所 暗示 的 , 可 以 让 元 素 从 一 种 状态 
慢 慢 转换 到 另 一 种 状态 。 这 种 转换 并 不 局 限于 悬 停 状态 ， 但 可 以 从 悬 停 讲 起 。 


在 上 一 章 中 , 我 们 使 用 CSS3 制作 了 一 个 有 红色 渐变 背景 的 按钮 。 所 使 用 的 CSS3 代码 如 
下 (为 简洁 起 见 省 略 了 浏览 器 私有 前 级 ): 


#content a { 
text-decoration: none; 
font: 2.25em /* 36px + 16 */ 'BebasNeueRegular'; 
background-color: £b01c20; 
border-radius: 8px; 
color: #ffffff; 
padding: 3%; 
float: left; 
background: linear-gradient(90deg, £b0lc20 09, #f15c60 1009); 
margin-top: 30px; 
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667% 0.8); 
text-shadow: 0px 1px black; 
border: 1px solid £bfbfbf; 





} 
我 们 来 给 按钮 增加 一 个 悬 停 效果 : 


*content a:hover { 
border: 1px solid #000000; 
color: #000000; 
text-shadow: 0px 1px white; 
} 


两 种 状态 下 的 效果 如 下 ， 先 看 默认 状态 : 





THESE SHOULD HAVE WON >> 
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7.1.1 




















这 里 只 是 在 鼠标 悬 停 时 简单 地 修改 了 一 下 文字 、 文 字 阴 影 以 及 边框 的 颜色 。 所 以 ， 你 可 
能 想象 出 来 ， 使 用 这 段 CSS 代码 ， 当 鼠标 悬 停 在 按钮 上 面 时 ， 按 钮 会 直接 从 第 一 种 状态 
(白色 文字 ) 突变 到 第 二 种 状态 ( 黑色 文字 ) 一 一 就 是 一 个 开关 效果 。 我 们 来 给 第 一 段 
CSS 规则 添加 一 点 CSS3 魔法 : 

$content a { 


[5e 原来 的 样式 ……: * | 
transition: all 1s ease 0s; 




















} 


现在 再 把 鼠标 悬 停 在 按钮 上 ， 文 字 、 文 字 阴 影 和 边框 阴影 的 颜色 都 会 从 第 一 种 状态 平滑 
过 渡 到 第 二 种 状态 。 注 意 ， 这 里 把 过 渡 应 用 到 了 元 素 而 不 是 悬 停 状 态 上 。 这 样 做 是 为 了 
让 元 素 的 其 他 状态 ( 如: acti ve ) 也 能 设置 不 同 的 样式 并 拥有 类 似 的 效果 。 所 以 请 记 住 ， 
过 渡 声 明 要 放 在 过 渡 效 果 开 始 的 元 素 上 。 那 过 湾 是 怎么 发 生 的 呢 ? 























过 渡 相 关 的 属性 
CSS3 过 渡 效 果 涉 及 四 个 属性 ， 也 可 以 使 用 包含 这 四 个 属性 的 缩写 。 
口 transition-property: 要 过 渡 的 CSS 属性 名 称 (比如 background-color, 
text-shadow 或 者 al1 ,使 用 al | 则 过 渡 会 被 应 用 到 每 一 个 可 能 的 CSS 属性 上 ); 
Dtransition-duration: 定义 过 渡 效 果 持 续 的 时 间 (时 间 单 位 为 秒 ， 比 如 , 3s 、25 
或 1.55 ); 
口 transition-timing-function: 定 义 过 渡 期 间 速 度 如 何 变化 (比如 ease、|linear、 
ease-in, ease-out, ease-in-out 或 cubic-bezier ); 
ütransition-delay: 可 选用 于 定义 过 渡 开 始 前 的 延迟 时 间 。 相 反 ， 将 该 值 设置 为 
一 个 负数 ， 可 以 让 过 渡 效 果 立 即 开始 ， 但 过 渡 旅 程 则 会 从 半路 开始 。 
单独 使 用 各 种 过 渡 属 性 创建 转换 效果 的 语法 如 下 : 


$content a { 






































transition-property: all; 
transition-duration: 1s; 
transition-ti ming-function: ease; 
transition-delay: 0s; 
} 
1. 过 渡 的 简写 语法 
正如 我 们 之 前 所 见 过 的 那样 ， 我 们 可 以 将 单个 的 声明 组 合成 一 个 简写 版 : 
transition: all 1s ease 0s 
使 用 简写 语法 时 要 注意 ， 声 明 中 的 第 一 个 时 间 值 总 被 应 用 给 transition-duration, 
第 二 个 时 间 值 总 被 应 用 给 transition-delay。 
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之 后 ， 代 码 如 下 : 


-0-transition: all 1s ease 0s; 
-ms-transition: all 1s ease 0s; 
-moz-transition: all 1s ease 0s; 
-webkit-transition: all 1s ease 0s; 
transition: all 1s ease 0s; 


我 们 将 没有 前 组 的 标准 版 本 放 在 了 最 后 面 ， 这 样 当 浏览 器 完全 实现 了 标准 之 后 ， 这 人 句 代 
码 就 会 覆盖 之 前 带 前 绥 的 版 本 。 
过 渡 的 局 限 性 
使 用 过 渡 时 有 一 点 需要 说 明 ， 即 有 些 属 性 无 法 实现 过 渡 ， 尽 管 规范 上 说 
| 
Q 它 应 该 可 以 ( 即使 在 最 新 的 工作 草案 http://dev.w3.org/csswg/css3- 
transitions/ 中 也 这 么 说 ), 例如 ，background- gradient 属性 就 无 法 过 
渡 。 但 理论 上 所 有 CSS 属性 都 是 可 以 过 渡 的 (http://www.w3.org/TR/css3- 


transitions/ #properties-from-css- )。 








2. 在 不 同时 间 段 内 过 渡 不 同属 性 
当 一 条 规则 要 实现 多 个 属性 过 渡 时 ， 这 些 属 性 不 必 步 调 一致 。 看 看 下 面 这 段 代 码 : 
#content a ( 

D 其 他 样式 ……*/ 

transition-property: border, color, text-shadow; 

transition-duration: 2s, 3s, 8s; 
} 
此 处 我 们 通过 transition-property 来 指定 只 过 渡 border color 和 text-shadow， 
然后 在 transition- duration 声明 中 我 们 设 定 边框 过 渡 效 果 应 该 2 秒 内 完成 ,文字 颜 
色 3 秒 , 文字 阴影 8 秒 。 由 逗号 分 隔 的 过 渡 持 续 时 间 按 顺序 对 应 上 面 的 CSS 属性 。 
3. 理解 过 渡 调 速 函 数 
大 多 数 过 渡 属 性 都 能 一 看 就 知道 是 什么 意思 。 前 面 其 实 已 经 介绍 了 过 渡 相 关 的 几 个 CSS 
导 性 。 其 中 ， 过 渡 持 续 时 间 和 延迟 时 间 都 是 以 秒 为 单位 的 时 间 值 ( 如 2s )， 所 以 也 很 好 理 
解 。 但 过 渡 调 速 函 数 勾 有 点 让 人 摸 不 着 头脑 了 。ease、|inear、ease-in、ease-0ut、 
ease-in-out 以 及 cubic-bezier 这 些 东 西 者 是 做 什么 用 的 ?它们 其 实 都 是 某 种 贝 塞 
尔 曲 线 ， 本 质 上 就 是 绥 动 函数 。 我 估计 这 样 讲 你 还 是 不 太 明 白 。 这 样 说 吧 …… 咽 ， 这 其 
实 就 是 那 种 用 文字 很 难 表 达 的 概念 ( 当然 本 人 有 很 好 的 文字 驾驭 能 力 )， 就 像 你 不 得 不 给 
你 的 男 一 半 解 释 清楚 为 什么 你 忘记 了 她 的 生日 一 样 ! 所 以 我 就 不 白费 口舌 了 ， 还 是 请 读 
者 直接 看 这 里 吧 http://cubic-bezier.com/。 
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cubic-bezier(.17,.67,.83,.67) €t cubic-bezier.co m 
二 ,> | (fl cubic-bezier.com/s.17.67,.83.67 Try C] (*8- Google a [A B-A- 











| cubic-bezier(17,67,83,67) o c... 十 





cubic- 
bezier(.17,.67,.83,.67) 


Preview & compare 
Duration: (6 } 6 seconds 


Library 


Click on a curve to compare it with the current one. 


by 


ease linear ease-in ease-out 


ease-in-out 





PROGRESSION 





fIME 


Tip: Right click on any library curve and select "Copy Link Address" to get a 
permalink to it which you can share with others 


951x1178 








这 个 网 站 能 让 你 对 比 查看 各 种 调 速 函数 ， 看 到 它们 的 区 别 。 不 过 ， 即 使 你 闭 着 眼睛 都 能 
写 出 贝 塞 尔 曲线 ( 而且 作为 老外 还 能 用 中 国 话 从 1000 倒数 到 1), 在 实际 使 用 中 , 它们 的 
效果 也 确 确实 实 没有 太 大 区 别 。 为 什么 呢 ? 

和 任何 增强 效果 一 样 ， 使 用 过 渡 效 果 也 必须 长 个 心眼 儿 。 在 现实 当中 ， 如 果 过 渡 效 果 持 
续 的 时 间 过 长 ， 会 让 网 站 感觉 很 慢 。 导 航 链接 用 整整 5 秒 时 间 完 成 过 渡 ， 只 会 让 你 的 用 
户 骂 娘 而 不 是 赞叹 。 因 此 ,除非 有 什么 特殊 的 理由 ， 否则 使 用 快速 ( 以 我 的 经 验 最 多 1s) 
的 默认 过 渡 (ease ) 效果 往往 最 好 。 














响应 式 网 站 中 的 有 趣 过 渡 

一 旦 变 成 响应 式 设计 的 发 烧 友 ， 你 就 会 发 现 自 己 在 浏览 网 页 时 总 要 调整 一 下 浏览 带 和 窗口 
大 小 ， 以 此 确认 该 网 站 是 不 是 响应 式 的 。 但 这 种 习惯 可 能 会 激怒 “普通 ”人 ， 所 以 最 好 
私下 里 做 这 件 事 。 
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7.2 





我 经 常 访问 的 一 个 讨论 Css 技术 的 好 网 站 是 Chris Coyier 的 http://css-tricks.com。 在 它 重 
新 设计 之 后 ， 我 浏览 时 碰巧 调整 了 浏览 器 窗口 ， 在 看 到 众多 元 素 在 屏幕 上 飞舞 时 ， 我 露 
出 了 会 心 的 微笑 。Chri 给 网 页 施 了 什么 魔法 使 其 具有 了 这 种 效果 ? 其 实 代 码 如 下 "”: 


| 
transition: all 1s; 














} 


此 处 , 我 们 使 用 CSS 通 配 选 择 咒 * 来 选择 页 面 所 有 元 素 , 然后 为 所 有 元 素 都 设置 一 个 耗 时 
1 秒 的 过 渡 效 果 。 声 明 中 省 略 了 过 渡 调 速 函 数 ， 浏 览 带 默认 会 使 用 ease ; 声明 中 同样 省 
略 了 延迟 时 间 ， 浏 览 器 默认 使 用 none ， 所 以 过 渡 效果 不 会 有 延迟 。 最 终 效 果 是 什么 样 ? 
大 多 数 效果 ( 超 链接 、 悬 停 状态 ， 等 等 ) 和 你 所 期 望 的 一 样 。 不 过 ， 因 为 所 有 元 素 都 被 
应 用 了 过 渡 ， 自 然 也 就 包括 媒体 查询 中 的 规则 ， 所 以 当 浏 览 咒 窗口 大 小 发 生变 化 时 ， 页 
面 元 素 将 从 一 种 排列 方式 过 渡 为 另外 一 种 排列 方式 。 必 须 这 人 么 做 吗 ” 当然 不 是 ! 但 这 种 
效果 是 不 是 既 好 看 又 好 玩 ? 没 错 ! 





























CSS3 的 2D 变形 


虽然 两 个 英文 单词 发 音 相 似 , 但 CSS 变形 (transformation, 包括 2D 变形 和 3D 变形 ) 和 
CSS 过 渡 (transitions ) 完全 不 同 。 可 以 这 样 理解 .过 渡 元 素 从 一 种 状态 平滑 转换 到 男 一 
种 状态 ， 而 变形 则 定义 了 元 素 将 会 变 成 什么 样子 。 我 自己 〈 极 其 幼稚 ) 的 理解 是 这 样 的 : 








DOOOODOOODOOOOODOOOOOOOOOODtansformDDODOOOODODODD 
DUOODOOODOODODOtransitionUDOUOOODOODOD 
可 能 刚才 的 这 个 比喻 把 你 搞 得 更 举 了 (或 者 你 根本 不 知道 擎 天 柱 是 谁 ), 还 是 直接 说 正题 
吧 。 我 们 来 给 AND THE WINNER ISN'T 网 站 的 导航 链接 在 悬 停 时 添加 一 个 2D 变形 : 


nav ul li a:hover ( 
transform scale(1.7); 






































} 
EMRA P, EFE EGER RSA A FAR : 


AND THE WINNER IS 
WHY? SYNOPSIS STILLS/PHOTOS 


























CD 该 网 站 最 新 版 的 CSS 代码 中 没有 这 名 代码 ， 所 有 元 素 都 应 用 过 渡 效 果 ， 影 响 性 能 。 译 者 注 
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我 们 告知 浏览 器 当 鼠 标 悬 停 在 链接 上 时 ， 将 其 放大 到 原始 大 小 的 1.7 fits 
现在 如 果 你 尝试 在 Safari 浏览 需 中 添加 这 种 规则 ， 须 注意 它 需 要 应 用 该 规则 的 原始 元 素 
必须 以 块 状 显示 。 示 例如 下 : 


nav ul li a { 
height: 42px; 
text-decoration: none; 
text-transform: uppercase; 
color: black; 
text-shadow: 0 1px 0 hsla(0, 0%, 1009, 1.0); 
font: 1.875em/ 42px 'BebasNeueRegular'; 
display: block; 
} 


不 这 样 做 的 话 ， 什 么 效果 都 没有 ， 你 懂 的 ， 垃 圾 得 很 。 


我 们 能 做 哪些 变形 


有 两 种 可 用 的 CSS3 变形 : 2D 变形 和 3D 变形 。2D 变形 的 实现 更 广泛 , 浏览 器 支持 更 好 ， 
写 起 来 也 更 简单 些 ， 所 以 我 们 先 来 看 看 2D 变形 。CSS3 的 2D 变形 模块 允许 我 们 使 用 下 
列 变 形 。 

口 scal e : 用 来 缩放 元 素 ( 放大 或 缩小 ) 

Ditranslate: 在 屏幕 上 移动 元 素 (上 下 左右 四 个 方向 ) 

Drotate: 按照 一 定 角度 旋转 元 素 (单位 为 度 ) 

口 skew: 沿 X 和 立轴 对 元 素 进 行 斜 切 

Omatrix: 人 允许 你 以 像素 精度 来 控制 变形 效果 

接 下 来 我 们 逐个 试验 一 下 ， 看 看 会 有 什么 效果 。 

1. scale 

我 们 前 面 看 到 过 这 种 变形 效果 。 但 是 除了 我 们 刚才 使 用 的 正 整 数值 , 还 要 知道 使 用 小 于 1 
的 值 可 以 缩小 元 素 ; 下 面 的 代码 就 会 将 元 素 缩 小 一 半 : 


transform: scale(0.5); 

















WHY? Es STILLS/PHOTOS 











2. translate 


transform translate(40px, 0px); 
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translate 会 告知 浏览 器 按照 一 定 度量 值 移动 元 素 ， 可 以 使 用 像素 或 百分比 。 语 法 是 第 
一 个 值 表 示 从 左 向 右 移动 的 距离 ( 本 例 中 是 40 像素 )， 然 后 是 从 上 往 下 移动 的 距离 ( 本 
例 中 是 0 像素 ， 所 以 元 素 与 其 他 导航 链接 保持 对 齐 )。 正 值 会 让 元 素 向 右 或 向 下 移动 ， 负 
值 则 会 让 元 素 向 左 或 向 上 移动 。 所 以 本 例 中 对 导航 链接 的 声明 效果 是 : 链接 在 鼠标 悬 停 
时 水 平 向 右 移动 40 像素 。 














VIDEOS/CLIPS QUOTES QUIZ 











3. rotate 
transform rotate(90deg) 


rotate 人 允许 你 旋转 一 个 元 素 。 在 本 例 中 ， 我 们 将 链接 悬 停 的 变形 修改 为 旋转 90 HE, TE 
浏览 器 中 的 效果 如 下 : 





WHY? STILLS/PHOTOS 


SISd9NAS 











括号 中 的 值 只 能 以 度 为 单位 (如 90deg )。 当然 , 这 也 挡 不 住 你 胡来 
素 按 照 下 面 所 设 定 的 这 个 值 来 旋转 : 

transform: rotate(3600deg); 

这 会 让 元 素 旋 转 整整 10 圈 。 这 人 么 奇怪 的 值 ， 其 用 处 少 之 又 少 ， 除 非 你 给 一 家 风车 公司 设 
计 网 站 ， 那 倒 可 能 会 派 上 用 场 。 

4. skew 

如 果 你 多 少 有 点 Photoshop 经 验 ， 就 会 知道 skew (RHI) 是 怎么 回 事 ， 它 会 让 元 素 在 一 
个 或 两 个 轴 上 变形 偏 斜 。 

transform skew(10deg, 2deg); 


在 悬 停 状态 的 导航 链接 上 应 用 该 规则 ， 产 生 的 效果 如 下 : 


你 可 以 让 一 个 元 
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WHY? SYNAPSIS STILLS/PHOTOS 











第 一 个 值 是 X 轴 上 的 斜 切 ( 本 例 中 是 10 度 ), 第 二 个 值 是 Y 轴 上 的 斜 切 ( RAPE 2 E ). 
省 略 第 二 个 值 意 味 着 仅 有 的 值 只 会 应 用 在 X 轴 上 【水 平方 向 ) 例如 : 


trans 








orm: skew(10deg); 


这 样 写 完全 有 效 ， 只 是 斜 切 仅 会 作用 于 入 轴 。 和 斜 切 值 始终 以 度 为 单位 。 正 值 沿 顺 时 针 方 
向 斜 切 ， 负 值 则 沿 道 时 针 方 向 斜 切 。 


5. matrix 


Af, BUDE SU xEfeesngmsé rr. fram t! 别 忘 了 你 要 讲 的 是 CSS3 中 的 
mat ri x ， 不 是 电影 ! 是 吗 ? 好 吧 ， 看 下 面 …… 

matrix 变形 的 语法 看 起 来 超 复杂 : 

transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989); 

它 基 本 上 能 让 你 将 若干 变形 效果 (scale, rotate, skew 等 等 ) 组 合成 单个 声明 。 上 面 的 声 
明 在 浏览 器 中 产生 的 效果 如 下 : 























WHY? SN STILLS/PHOTOS 











总 的 来 说 ， 我 还 是 亦 喜 欢 挑战 难题 的 ， 但 我 相信 你 也 会 同意 这 语法 也 太 有 挑战 性 了 。 而 
且 在 你 看 了 规范 文档 之 后 就 会 发 现 问题 更 难 , 要 完全 理解 矩阵 你 得 了 解 相关 的 数学 知识 : 


http://www.w3.org/TR/css3-2d-transforms/Zcssmatrix-interface o 


傻瓜 化 的 和 矩阵 变形 工具 


无 论 怎么 想象 我 都 不 是 一 个 数学 家 ， 所 以 当 我 需要 创建 矩阵 变形 时 ， 我 一 般 都 走 捷径 。 
如 果 你 的 数学 也 不 太 好 ， 我 建议 你 访问 这 里 : http://www.useragentman.com/matrix/。 








CD Matrix 即 




















电影 《黑客 帝国 》 详 见 http://baike.baidu.com/view/180529.htm#sub5119498。 一 一 译 者 注 
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4* IJ useragentman.com x e N- a & D- .*- 


[T] The Css3 Matrix Comstruetionser [FT 
The Matrix Construction Set 


This tool will allow developer to do pixel perfect CSS3 Transforms by dragging and dropping objects on tbe screen (or filling out the form below). The red boa is the object before 


transformation, the green one is the box after transformaton. You can drag the red box a: je the bottom right corner. You can also 
transform the green object by dragging the three control points around the grid. llack to L 





Points Answar 














(19 L10 — )|(»» Le ) tzansform-origin: -10.0px ~ 
Subma Changes | Reset form 
Diagram 
| Thisisa 
| block 
| element 








2156x2009 





Matrix Construction Set 这 个 网 站 可 以 让 你 精确 地 将 元 素 拖 中 成 想 要 的 样子 ， 然 后 它 会 自 
动 生成 完美 的 矩阵 代码 (代码 中 包含 了 浏览 器 私有 前 级 )。 

6. transform-origin 属性 

在 使 用 上 述 变形 效果 的 同时 , 你 还 可 以 使 用 transform-origin 属性 来 修改 变形 效果 的 
起 点 : 


transform rotate(45deg); 7 
transf orm-origin: 20% 20%; 


将 上 面 的 规则 应 用 到 导航 链接 上 ， 鼠 标 悬 停 之 后 的 效果 如 下 : 











WHY? L STILLS/PHOTOS 


5, 
ON 
































transform-origin 属性 默认 就 在 起 作用 ， 变 形 的 起 点 默认 是 元 素 的 中 心 点 。 这 个 属性 
提供 了 一 种 方便 的 方法 来 移动 变形 的 中 心 点 ， 这 样 能 做 出 很 多 很 赞 的 效果 。 
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7.3 


transform-origin 属性 的 详细 信息 请 见 这 里 : http://www.w3.org/TR/ ] 


css3-2d-transforms/#transform-origin-property 。 





以 上 讲述 了 2D 变形 的 基本 要 素 。 比 起 3D 变形 , 2D 变形 在 浏览 器 中 被 广泛 地 支持 ， 它 为 
我 们 提供 了 一 种 轻 量 便捷 的 方法 ， 让 现代 浏览 絮 的 用 户 体验 得 以 锦上添花 。 





2d-transforms/。 


| KW CSS3 的 2D 变形 模块 的 完整 规范 文档 请 见 : http://www.w3.org/TR/css3- | 


尝试 CSS3 的 3D 变形 


Webkit 核心 浏览 器 ( Safari 和 Chrome ) 和 Firefox 10+ 都 已 支持 CSS3 的 3D 变形 , 但 最 新 
的 正 10 都 还 不 支持 该 特性 。 尽 管 缺 少 “桌面 版 ”浏览 器 的 广泛 支持 ， 但 多 亏 了 移动 平台 
浏览 器 基本 都 是 Webkit 血统 , 所 以 3D 变形 在 Android ( V3 以 后 的 版 本 ) 和 iOS (所 有 版 
本 ) 上 均 被 支持 。 


从 这 点 上 来 讲 ,， 你 最 好 在 Webkit 核心 浏览 器 ( 如 Chrome 或 Safari ) 中 测试 网 页 效果 ( 当 
然 ， 也 可 以 选择 其 他 支持 3D 变形 的 浏览 器 )。 

现在 我 们 开始 尝试 3D 变形 。 这 是 一 片 广阔 天 地 ,， 有 几乎 无 穷 的 可 能 性 。 我 想象 着 有 一 天 
3D 变形 被 广泛 支持 ， 我 们 就 可 以 用 它 来 做 图 片 轮 播 效果 ， 而 不 用 再 依赖 jQuery 等 
JavaScript 方 案 了 。 不 过 ， 在 那 一 刻 到 来 之 前 ， 我 们 先 来 体验 一 下 。 
假设 给 AND THE WINNER ISNT 网 站 做 一 个 简单 测验 功能 。 测 试题 目 由 一 组 电影 海报 组 
成 ， 你 必须 猜 猜 世界 上 最 权威 的 电影 评论 家 ( 哈哈, 说 的 就 是 我 ! ) 对 这 些 电影 的 评判 是 
好 是 坏 。 将 鼠标 悬 停 在 图 片上 ( 在 触摸 屏 上 则 是 触 击 图 片 ) 就 能 揭晓 答案 。 


下 面 的 代码 是 相关 的 页 面 标签 ， 其 中 省 略 了 重复 的 图 片 标签 ， 因 为 它们 的 结构 都 一 样 : 


«section classz'Qcontainer'» 
«div classz'film'» 
«div classz'face front'» 
«img srcz"'img/goonies.jpg" altz'The Goonies" /> 
«div» 
«div classz'face back'»«h5»2HOT! «/ h5»«/ di v» 
</div> 
«| section» 


对 应 的 CSS 代码 如 下 。 注 意 ， 因 为 Webkit 浏览 器 对 3D 变形 的 支持 比较 好 ， 所 以 下 面 的 
声明 都 使 用 特定 的 浏览 右前 级 。 和 之 前 一 样 ， 在 实际 开发 中 ,浏览 右 私 有 前 级 就 是 你 形 
影 不 离 的 好 朋友 。 
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.Qcontain 
hei gh 


wi dt h: 


posit 
- webk 


float: 


mar gi 
} 
film { 


width: 
height: 
- webki 
- webki 


} 


.Qcontain 


} 


.face ( 


- webki 


positi 
- webki 


} 
. back { 





width: 
height: 
- webki 


backg 
backg 


paddi 
} 


er { 

t: 100%; 

28%; 

ion: relative; 
it-perspective: 800; 
left; 

n-right: 2%; 


100%; 

15em; 

-transform-style: preserve-3d; 
-transition: 1s; 


er:hover .film{ 


-transform: rotateY(180deg); 


on: absolute; 
-backface-visibility: hidden; 





66%; 

127%; 

t-transform: rotateY(180deg); 

round: #3b3b3b; 

round: -webkit-linear-gradient(top, 
rgba(0,0,0,0.65) 0%, 
rgba(0,0,0,0) 100%); 





ng: 15%; 


代码 部 署 好 之 后 ， 将 鼠标 悬 停 在 海报 图 片上 ， 会 看 到 图 片 翻转 到 背面 并 显示 出 了 该 电影 
的 评判 结果 。 





AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS. QUOTES QUIZ 


— ni THE LI OR NOT QUIZ 


etl n THE CRITICS SAY, USE THE FORCE AND DECIDE WHICH OF THESE FILMS YOU THINK IS HOT AND 





NITE UUR OPON 1S ABSOLUTELY CORRECT, YOU ARE WRONG, EVEN I YOU THINN YOU ARE RINT. THAT A FACT. DEAL WITN I 
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分 析 3D 变形 效果 
我 们 来 研究 一 下 代码 ， 看 看 3D 变形 效果 是 如 何 实现 的 。 








AND THE WINNER IS 


wn SYNOPSIS STILLS/PHOTOS VIDEOS/CUPS. QUOTES waz 


FORGET WHAT THE CRITICS SAY, USE THE FORCE AND DECIDE WHICH OF THESE FILMS YOU THINK IS HOT AND 
WHICH IS NOT. 


THE HOT OR NOT QUIZ 
A rete 











第 一 个 要 点 是 在 父 级 元 素 上 设置 透视 。 这 样 就 开启 了 3D 场景 : 
.Qcontai ner ( 

height: 1005 

width: 28% 

position: relative; 

-Wwebkit-perspective: 200; 

float: left; 

margin-right: 2%; 


} 

透视 的 值 越 大 ， 就 表示 你 的 视点 与 3D 场景 之 间 的 景深 越 大 。 因 此 ,如果 想 要 一 点 隐约 的 
3D 效果 ， 就 增 大 透视 值 ; 如 果 想 要 非常 明显 的 3D 效果 ， 则 减 小 透视 值 。( 3D 效果 的 立 
体 程度 ， 取 决 于 3D 场景 与 观察 者 之 间 的 距离 。) 











下 一 个 要 点 : 
.film{ 
width: 100% 
height: 15em 


-Wwebkit-transform-style: preserve-3d; 
-webkit-transition: 1s; 


} 
.Qcontai ner 类 中 添加 的 透视 声明 只 会 应 用 到 其 第 一 个 子 元 素 上 ( 即 本 例 中 的 Class 


H. fil mH div ), 因 此 ,为 了 延续 父 元 素 的 透视 ,我 们 给 . fi | m 元 素 设 定 了 preserve- 3d 
(这样 可 以 设置 一 个 3D 场景 )。 
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接 下 来 , 当 鼠 标 悬 停 在 , Qcontai ner 模块 上 时 , 我 们 给 . film 这 个 div 添加 一 个 翻转 效果 : 


.Qcontai ner:hover .film { 
-webkit-transform rotateY(180deg); 





} 
接 下 来 的 规则 用 来 处 理 当 海报 翻转 之 后 隐藏 在 其 背面 内 容 : 
.face ( 
position: absolute; 
-Wwebkit-backface-visibility: hidden; 
} 
„face 必须 使 用 绝对 定位 ， 这 样 海报 才能 盖 在 , back 这 个 div 的 上 面 : 
.back ( 
width: 6695 
height: 12795 
-webkit-transform: rotateY(180deg); 
background: £3b3b3b; 
background: -webkit-linear-gradi ent(top, 
rgba(0,0,0,0.65) 05, 
rgba(0,0,0,0) 10099; 
padding: 1595 
} 





最 后 ， 我 们 给 . back 这 个 div 也 加 上 rotateY。 Ax ejiis, . back 这 个 div 就 会 显 
示 在 正面 海报 之 上 。 


这 就 全 部 做 完了 。 现 在 将 鼠标 移 到 任意 一 张 海 报 上 都 会 看 到 超级 酷 炫 的 3D 效果 。 
不 过 ， 对 于 非 Webkit 核心 浏览 器 ， 页 面 效果 肯定 就 残废 了 : 











WURST 
AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEDS/CUIPS. QUOTES wg 


p HE HOT OR NOT QUIZ 


CR USE THE FORCE AND DECIDE WHICH OF THESE FILMS YOU THINK tS HOT AND WHICH 





MIT. SUE DP E LE PTTLY P 





AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
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还 好 ,我 们 可 以 用 一 点 传统 的 CSS 代码 为 非 Webkit 核心 浏览 器 提供 一 个 合理 的 降级 方案 : 





.front ( 
z-index: 5; 
} 
.Qcontainer:hover .front { 
z-index: 0; 
} 
首先 ， 我 默认 给 front 设置 了 z-index 为 5 ， 以 便 让 其 显示 在 , back EE: 
.front ( 
z-index: 5; 
} 


然后 ， 当 . Qcontai ner RATERS, RIA. front 设置 z-index 为 0 以 便 
让 其 隐藏 在 . back 后 面 : 


.Qcontainer:hover .front ( 
z-index: 0; 


} 
这 样 我 们 就 给 不 支持 3D ZEJE AN V si dde Bt T AERE, RETER 3D 效果 。 











AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CUPS QUOTES QUIZ 


wp m THE HOT OR NOT QUIZ 


E NNI TE CATIES SAY, USE THE FORCE AND DECIDE WHICH OF THESE FILMS YOU THINK IS HOT AND WHICH 





NITE- OUR OPINION S ASSOLUTE Y CORSECT. YOU ARE WRONG, EVEN IF YOU THINK YOG ARE RIGHT. THAT'S A FACT. DEAL WITH IT. 











7.3.2 3D 变形 尚未 成 熟 
根据 我 的 实践 经 验 , 目前 大 多 数 3D 变形 在 使 用 百分比 尺寸 时 效果 都 不 太 好 ( 例如 ,修改 
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7.4 


上 节 例 子 中 的 视 口 宽度 ， 将 会 使 3D 变形 效果 完全 错乱 )。 所 以 现在 要 让 3D 变形 在 响应 
式 布局 中 呈现 完美 效果 还 有 一 些 问题 。 此 外 ， 由 于 浏览 器 的 支持 有 限 ， 在 制作 跨 浏览 带 
网 站 时 ,3D 变形 无 法 提供 健壮 的 解决 方案 。 目 前 , 我 依然 使 用 jQuery 或 类 似 技 术 来 制作 
这 类 变形 效果 。 
但 是 ，CSS3 3D 变形 的 前 途 是 光明 的 ， 当 浏览 需 开 始 广泛 支持 时 ， 它 就 为 我 们 提供 了 一 
次 难得 的 机 遇 ， 让 我 们 可 以 将 现在 依赖 于 JavaScript 的 优雅 效果 移植 到 样式 表 中 。 





























csswg/css3-3d-transforms/。 





想 了 解 W3C 有 关 CSS 3D 变形 的 最 新 进展 ,请 见 这 里 : http://dev.w3.org/ ] 


CSS3 动画 效果 
如 果 你 制作 过 Flash 动画 , 那 CSS3 动画 你 也 能 立即 上 手 。CSS3 沿用 了 在 Flash 和 其 他 基 
于 时 间 线 的 应 用 程序 中 被 广泛 使 用 的 动画 关键 帧 技术 。 


相 较 于 3D 变形 , CSS3 动画 的 浏览 器 支持 度 更 高 。 Firefox 5+, Chrome, 、Safari 4+ Android 
(所 有 版 本 )、iOS (所 有 版 本 ) 均 支持 ，IE 10 也 决定 加 入 该 行列 。 

CSS3 动画 由 两 部 分 组 成 : 首先 是 关键 帧 声明 ， 然 后 在 动画 属性 中 使 用 该 关键 帧 声明 。 
上 一 节 我 们 制作 了 一 个 简单 的 翻转 效果 ， 用 于 展示 我 对 电影 的 评判 结果 。 但 是 翻转 效果 
的 背面 文字 非常 丑陋 ， 所 以 我 们 来 给 这 些 文字 添加 一 个 有 趣 的 闪烁 效果 。 
首先 是 关键 帧 规则 : 

@keyframes warning { 


0% { 
ext-shadow: 0px Opx 4px #000000; 






































50% { 

ext-shadow: 0 0 20px #000000; 
} 
100% { 

ext-shadow: 0px Opx 4px #000000; 





} 
} 


HEARR CRISE MR, MRENA Vi PC AR, ME Berna ERI — 2H TER N AA 
HARTZ ( 如 @- webkit-keyframes )。 

我 们 来 分 析 一 下 上 面 的 代码 ; 

Qkeyframes warning { 


0% { 
text-shadow: 0px Opx 4px #000000; 
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} 
50% { 
text-shadow: 0 0 20px #000000; 
} 
100% { 
text-shadow: 0px Opx 4px #000000; 
} 
} 





首先 , 我 们 定义 了 一 个 @keyframes (关键 帧 ) 声明 。 然 后 为 这 个 特定 的 关键 帧 声明 设置 
了 一 个 名 称 : warning 。 你 可 以 将 其 叫 成 任何 名 字 ， 但 考虑 到 这 些 关键 帧 声明 可 以 在 多 
个 元 素 上 复 用 ， 所 以 建议 取 一 个 合理 的 名 字 。 
可 以 设置 多 个 关键 帧 ( 比如 百分比 值 10% 、20% 、30% , 409555555 ), 或 者 也 可 以 使 用 fr om 
和 to 值 来 定义 动画 的 开始 帧 和 结束 帧 。 但 注意 Webkit 浏览 器 在 使 用 from 和 to 值 的 情 
况 下 效果 无 法 保证 〈 它 更 喜欢 0% 和 10096 )。 


@keyframes warning { 














from { 
text-shadow: 0px Opx 4px #000000; 
} 
50% { 
text-shadow: 0 0 40px #000000; 
} 
to { 
text-shadow: 0 0 4px #000000; 
} 


} 


本 例 给 文字 阴影 加 一 点 动画 ,动画 开始 时 是 4 像素 阴影 ， 然 后 用 50% 的 时 间 变 化 至 40 像 
素 阴影 ， 之 后 再 变化 回 4 像素 阴影 。 


我 们 已 经 声明 了 关键 帧 ， 接 下 来 可 以 在 动画 属性 中 引用 它 : 


.back h5 ( 
font-size: 4em; 
color: 4$f2050b; 
text-align: center; 
animation: warning 1.5s infinite ease-in; 





} 


在 animation 属性 之 后 ,我 们 设 定 了 要 使 用 的 关键 帧 〈 例子 中 的 warni ng )， 然 后 设 定 
了 动画 的 持续 时 间 (1. 5s )， 之 后 设 定 了 ani mation-iteration-count (我 们 在 此 时 
使 用 了 infinite 让 动画 连续 循环 播放 )， 最 后 设 定 了 调 速 函 数 (ease-in )。 静 态 截 图 
显然 无 法 展示 出 动画 ， 但 希望 你 能 想象 得 出 文字 阴影 一 闪 一 闪 的 效果 。 访 问 这 里 查看 效 


Æ: http:/www.andthewinnerisnt.com。 
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aee —————— Quiz: And the winner isn't. "— E 
JU- Quiz And rhe winner ksms - - Im 5 "T—— , " M eid 
AND THE WINNER IS 
WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


xw mm THE HOT OR NOT QUIZ 


FORGET WHAT THE CRITICS SAY, USE THE FORCE AND DECIDE WHICH OF THESE FILMS YOU THINK 
IS HOT AND WHICH IS NOT... 


g in Safari or Chrome 





NOTE: OUR OPINION IS ABSOLUTELY CORRECT. YOU ARE WRONG, EVEN IF YOU THINK YOU ARE RIGHT. THAT'S A FACT. DEAL WITH IT. 

















CSS3 动画 缩写 语法 可 以 接受 全 部 7 个 独立 动画 属性 的 值 。 除 了 上 例 中 使 用 的 之 外 ,还 可 
以 设 定 ani mati on- del ay (动画 开始 前 的 延 时 ), ani mation-play-state( 值 可 以 是 
running 或 paused, 用 于 控制 动画 的 播放 和 暂停 ), 最 后 还 有 ani mation-fill-mode， 
这 个 属性 到 现在 我 也 没 找到 用 武之 地 ( 默认 值 是 none )。 当 然 也 可 以 不 用 缩写 语法 ， 而 
是 像 下 面 这 样 将 它们 一 个 一 个 单独 列 出 来 : 


ani mation-name: warning; 


animation-duration: 1.55; 
ani mation-ti mi ng-function: ease-in-out; 
ani mation-iteration-count: infinite; 


ani mation-play-state: running; 
ani mation-delay: 0s; 











ani mation-fill-mode: none; 
前 面 已 经 提 过 ， 在 其 他 元 素 上 复 用 动画 效果 非常 简单 ， 如 下 所 示 : 
nav ul li a:hover ( 


animation: warning 1.5s infinite ease-in; 


} 


这 样 导航 链 接 也 会 有 同样 的 闪烁 效果 。 你 可 以 (希望 能 ) 看 到 下 面 截图 中 的 STILLS/PHOTOS 
链接 正 处 在 闪烁 过 程 中 。 访 问 这 里 看 看 真实 效果 : http:/www.andthewinnerisntcom。 
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0090 "Quiz: And the winner isnt 








ese YET ea cp 
[Vs antt uni 
AND THE WINNER IS 
WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES Quiz 


THE HOT OR NOT QUIZ 


FORGET WHAT THE CRITICS SAY, USE THE FORCE AND DECIDE WHICH OF THESE FILMS YOU THINK IS HOT AND 
WHICH IS NOT... 





NOTE: OUA OPINION 1S ABSOLUTELY CORRECT. YOU ARE WRONG, EVEN IF YOU THINK YOU ARE RIGHT. THATS A FACT. DEAL WTH T 














这 只 是 使 用 CSS3 动画 的 一 个 简单 示例 。 事 实 上 任何 CSS 属性 都 可 以 用 在 关键 帧 动画 中 ， 
所 以 有 无 限 可 能 性 。 网 上 有 数 不 清 的 CSS3 动画 技巧 范例 ， 像 http://webdesignerwall.com/ 
trends/47-amazing-css3-animation-demos 这 个 网 页 就 足以 给 你 提供 丰富 的 CSS3 动画 灵感 。 


qlip 








28.1 fit W3C 有 关 CSS 动画 的 最 新 进展 ,请 见 这 里 : http://dev.w3.org/csswg/ 


css3-animations/。 





组 合 使 用 CSS3 变形 和 动画 


我 们 来 尝试 再 做 一 种 效果 , 秀一 下 我 们 的 CSS3 功力 。 我 想 将 侧 边 栏 的 图 片 按照 不 同 的 角 
度 来 放置 ， 然 后 让 它们 动 起 来 。 目 标 就 是 当 页 面 刚 加 载 进 来 的 时 候 这 些 图 片 都 “ 晃 ” 儿 
下 。 侧 边栏 的 标签 代码 如 下 : 


<aside> 
«div rolez'complementary'» 
«div classz'sideBlock unSung'» 

«hl»Unsung heroes... «[ hl» 

«a href="#"><img srcz'img/ m dni ghtRun.j pg* 
altz'Midnight Run" /></a> 

<a href="#"><img srcz'img/ wyattEarp.j pg* 
altz'Watt Earp" /></a> 





«[ di v» 
«[ di v» 
«div rolez'complementary'» 
«div classz'sideBlock overHyped'» 
«h1»0verhyped nonsense... </h1> 
<a href="#"><img src="i mg/moulinRouge. jpg" 
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altz'Moulin Rouge" /></a> 


«a href="#"><img src="i mg/ ki ngKong.j pg" 


«I di v» 
«I di v» 
«[ asi de» 


altz'King Kong" /»«/a» 


接 下 来 我 们 开始 编写 相关 的 CSS3 代码 。 首 先 ， 创 建 一 个 名 为 swi ng 的 关键 帧 声明 : 


Q- webkit-keyframes swi 


from { 
ransform: rota 











} 





e 





ng ( 


3deg); 


1deg); 


10deg); 


1deg); 


3deg); 


这 个 动画 使 用 了 2D 旋转 变形 ， 以 使 图 片 从 3 度 旋转 至 10 度 然后 再 旋转 回 原 位 。 接 下 来 
给 图 片上 追加 ani mati on 属性 : 
*quiz .unSung a:nth-child(odd) img { 


transform: rotate(3deg); 
animation: swing 0.1s 5 ease-in; 


} 








*quiz .unSung a:nth-child(even) img ( 
transform rotate(-3deg); 
animation: swing 0.1s 5 0.3s ease-in; 


} 


*quiz .overHyped a:nth-child(odd) img { 
transform: rotate(3deg); 7 
animation: swing 0.1s 5 0.2s ease.in; 


*quiz .overHyped a:nth-child(even) img { 
transform: rotate(-3deg); 
animation: swing 0.1s 5 0.5s ease-in; 


} 








} 


我 们 来 分 析 一 下 上 面 的 代码 。 首 先 我 们 使 用 了 CSS 的 id 选择 器 ， 这 样 就 可 以 将 该 规则 限 
定 应 用 在 QUIZ 页 面 上 (该 页 面 上 的 body 标签 是 <body id="quiz"> )。 

在 添加 动画 属性 之 前 ， 我 想 先 给 图 片 设置 一 个 默认 的 旋转 变形 ， 以 便 让 它们 在 动画 结 
之 后 仍然 是 倾斜 的 。 但 我 不 想 它 们 都 按 同 一 个 角度 倾斜 ， 所 以 我 们 使 用 从 第 5 章 中 学 来 
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然后 给 每 张 图 片 都 追加 ani mati on 属性 , 注意 
认定 为 动画 延 时 时 间 。 通 过 设 定 这 个 值 ， 就 可 以 分 别 在 不 同 的 时 间 启 


的 nth-child3 
#quiz .unSung 
transform 
ani mation: 

} 

#quiz .unSung 
transform 
ani mation: 

} 

#quiz .overHy 
transform 
ani mation: 

} 

#quiz .overHy 
transform 
ani mation: 

} 

间 值 (0.5 b ) 
个 动画 效果 。 
*quiz .overHy 
transform 
ani mati on: 


} 


同样 ， 再 好 的 文字 也 展示 不 出 来 动画 效果 。 如 果 你 这 会 儿 上 不 了 网 ， 那 我 
侧 边 栏 的 电影 海报 会 快速 地 左右 晃动 几 下 ， 之 后 就 会 像 下 图 所 示 那 样 倾斜 地 摆 放 着 : 


选择 名 来 分 别 选择 出 奇数 与 偶数 图 片 ， 然 后 应 用 不 同 的 旋转 变形 : 


a:nth-child(odd) img { 
rotate(3deg); 
swing 0.1s 5 ease.in; 


a:nth-child(even) img { 
rotate(-3deg); 
swing 0.1s 5 0.3s ease. in; 


ped a:nth-child(odd) img { 
rotate(3deg); 
swing 0.1s 5 0.2s ease.in; 


ped a:nth-child(even) img ( 
rotate(-3deg); 
swing 0.1s 5 0.5s ease-in; 














ped a:nth-child(even) img ( 
rotate(-3deg) 
swing 0.1s 5 0.5s ease.in; 





a G i à " 


AND THE WINNER IS 


WHY? SYNOPSIS STILLS/PHOTOS VIDEOS/CLIPS QUOTES QUIZ 


Pr THE HOT OR NOT QUIZ 


FORGET WHAT THE CRITICS SAY, USE THE FORCE AND DECIDE WHICH OF THESE 
FILMS YOU THINK IS HOT AND WHICH IS NOT... 





GUUNIGS 
- 








VVVVVVVVVNVVVVNNVNVNNNNVNN. 








注意 规则 之 间 的 差别 。 缩写 语法 会 将 第 二 个 时 


动 各 


诉 你 ， 
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7.5 


小 结 





有 关 CSS3 过 渡 、 变 形 和 动画 的 内 容 , 足 足 可 以 写 好 几 本 书 。 但 是 我 希望 通过 本 章 晴 蝶 点 
水 般 的 学 习 , 你 能 了 解 它们 的 基本 知识 并 让 它们 运行 起 来 。 Hsc, 我 们 采用 CSS3 新 特性 
和 技巧 的 最 终 目的 ， 是 想 使 用 CSS3 RE JavaScript 制作 一 些 优 雅 精美 的 增强 效果 ， 从 
而 使 响应 式 设计 的 代码 更 加 简洁 、 效 果 更 加 丰富 。 本 章 我 们 学 习 了 CSS3 过 渡 是 什么 ,以 
及 如 何 编写 相应 代码 ， 了 解 了 ease、linear 等 调 速 函数 ， 并 在 响应 式 设计 中 应 用 它们 
制作 了 简单 但 有 趣 的 效果 。 还 学 习 了 缩放 、 和 斜 切 等 2D 变形 ,以 及 如 何 将 它们 与 过 渡 组 合 
使 用 。 此 外 ， 还 在 学 习 CSS3 动画 的 强大 功能 与 简洁 语法 之 前 ， 简 单 了 解 了 3D 变形。 你 
要 相信 自己 的 CSS3 功力 正在 不 断 增长 ! 


但 是 ， 如 果 网 站 设计 中 有 一 个 领域 是 我 尽 可 能 避免 谈 及 的 〈 就 如 我 拼命 不 想 看 《慕尼黑 》 
或 《金刚 》 一 样 )， 那 肯定 就 是 表单 。 我 不 知道 为 什么 ， 只 是 一 直觉 得 制作 表单 是 件 单调 
乏味 的 事 儿 。 当 我 知道 了 HTMLS 和 CSS3 可 以 让 表单 的 制作 、 美 化 甚至 验证 ( 没 错 ， 就 
是 验证 ! ) 过 程 都 比 以 往 简 单 很 多 时 ， 简 直 把 我 给 乐 坏 了 。 我 高 兴 得 都 手舞足蹈 了 ， 相 信 
到 时 候 你 也 会 跟 我 一 样 。 下 一 章 我 们 就 来 学 习 HTMLS 表单 。 
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8.1 


用 HTML5 和 CSS3 征服 表单 


过 去 , 想 要 让 表单 风格 蜂 浏 览 咒 保持 一 致 是 很 困难 的 。 而 且 还 需要 JavaScript 来 验证 表单 
输入 ,此 外 , 也 缺少 一 些 处 理 日 常 信 息 〈 如 电话 号 码 、 电 子 邮箱 以 及 URL ) 的 输入 类 型 。 
好 消息 是 HTMLS 基本 上 解决 了 这 些 常 见 的 问题 。 接 下 来 我 们 来 熟悉 一 下 新 的 HTMLS5 K 
单 特 性 ， 来 看 看 它们 如 何 减 轻 我 们 的 负担 。 

在 响应 式 设计 中 使 用 HTMLS 制作 表单 会 带 来 额外 的 好 处 。 它 能 让 我 们 再 次 简化 代码 , 为 
用 户 提供 尽 可 能 简洁 的 页 面 。 对 于 不 支持 这 些 新 特性 的 浏览 器 ， 我 们 有 工具 给 它们 打 补 
丁 ， 也 能 做 到 表现 一 致 。 


本 章 内 容 


口 在 表单 域 中 搬入 占 位 符 文 字 

Q 在 需要 时 禁用 表单 域 的 自动 完成 功能 
口 将 特定 表单 域 设置 为 必 填 项 
口 使 用 不 同类 型 的 输入 框 ， 如 电子 邮箱 、 电 话 号 码 和 URL. 
a 制作 数字 输入 滑动 条 以 方便 选择 数值 

口 使 用 日 期 和 颜色 选择 器 

口 学 习 如 何 使 用 正则 表达 式 定义 表单 值 验证 规则 

口 为 落后 的 浏览 器 添加 腻子 脚本 

口 使 用 CSS3 轻松 灵活 地 美化 HTMLS 表单 

























































































HTML5 表单 

我 决定 让 人 们 可 以 在 网 站 上 对 那些 已 经 获得 大 奖 的 烂 电 影 发 港 他 们 的 不 满 。 我 要 制作 一 
个 表单 ， 让 人 们 发 表 想 法 ， 说 说 哪些 电影 不 该 获奖 ， 而 那些 电影 应 该 得 奖 。 

下 图 展示 了 我 们 要 制作 的 表单 在 Chrome (v16) 中 添加 了 一 点 基本 样式 后 的 效果 : 
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(5) Oscar Redemption: And the > 


eich GA 


se OSCAR REDEMPTION 


HERE'S YOUR CHANCE TO SET THE RECORD STRAIGHT: TELL US WHAT YEAR THE WRONG 
FILM GOT NOMINATED, AND WHICH FILM SHOULD HAVE RECEIVED A NOD... 





About the offending fim (part 1 of 3) 





The film in question? e.g. King Kong 





Year Of Crime 





Award Won 





Tell us why that's wrong? |I fell asleep within 20 minutes. 





MOULIN ROUGE KINGKONG 





How you rate it (1 is woeful, 10 is awesomesauce) 


What should have won? (part 2 of 3) 





The film that should have won? e.g. Cable Guy 





Tell us why it should have won? 





Hello? CAABBLLLLE GUUUY!!!! | 





How you rate it (1 is woeful, 10 is awesomesauce) 5 日 


About you? (part 3 of 3) 





Your Name Dwight Schultz 





Telephone (so we can berate you if you're wrong) 1-234-546758 





Your Email address dwight.schultzGgmail.com 





Your Web address Www.mysite.com 


SUBMIT REDEMPTION 














除了 标准 的 表单 输入 框 和 文本 输入 域 之 外 ， 表 单 中 还 有 一 个 数字 控制 器 、 一 个 滑动 输入 
条， 并 且 很 多 表单 域 都 有 占 位 符 文字 。 如 果 我 们 聚焦 ( 选中 ) 某 个 表单 域 ， 其 中 的 占 位 
符 文字 就 会 自动 消失 ;如 果 表单 域 失去 焦点 目 未 输入 任何 内 容 (点击 一 下 输入 框 以 外 的 
区 域 即 可 )， 占 位 符 文字 又 会 再 次 显示 。 此 外 , 如 果 在 Google Chrome 浏览 器 中 查看 页 面 ， 
当 我 们 准备 提交 没有 任何 内 容 的 表单 时 ， 就 会 看 到 下 面 的 结果 : am 
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8.1.1 





9.0 0 // © oscar edempson: And ne = EE m 本 E 


€^5ca H& 











summ OSCAR REDEMPTION 


HERE'S YOUR CHANCE TO SET THE RECORD STRAIGHT: TELL US WHAT YEAR THE WRONG 
FILM GOT NOMINATED, AND WHICH FILM SHOULD HAVE RECEIVED A NOD... 


About Me offending füm (pert 1 of 3j 





The film in question? | 


Year Of Crime [ E Please fill in this field. 





Award Won 





Tell us why that's wrong? 





How you rate it (1 is woeful, 10 rs awesomesauce) 


What should have won? (part 2 of 3) 

















The film that should have won? e.g. Cable Guy 
Tell us why it should have won? Hello? CAABBLLLLE GUUUY!!!! 
How you rate it (1 is woeful, 10 is awesomesauce) 5 日 


About you? (part 3 of 3) 














Your Name Dwight Schultz 

Telephone (so we can berate you if you're wrong) 1-234-546758 

Your Email address dwight.schultz@gmail.com 
Your Web address www.mysite.com 


SUBMIT REDEMPTION I: 











页 面 不 仅 包含 一 些 视觉 元 素 ( 滑动 条 和 控制 器 )， 还 具有 基本 的 客户 端 验证 功能 。 我 们 知 





道 ， 过 去 的 表单 验证 一 般 都 需要 依赖 JavaScript。 


现在 ， 所 有 这 些 用 户 界 面 元 素 (包括 上 述 的 滑动 条 、 占 位 符 文 字 和 控制 器 ) 和 表单 验证 
都 可 以 使 用 原生 的 HTMLS5 来 完成 ， 不 需要 再 依赖 JavaScript， 这 是 个 很 好 的 消息 。 让 我 





们 来 看 看 如 何 使 用 这 些 新 的 表单 特性 。 


理解 HTML5 表单 中 的 元 素 


我 们 的 HTMLS 表单 包含 很 多 元 素 ， 所 以 我 们 拆 开 来 讲 。 首 先 表 单 被 设 定 了 一 个 ID 用 于 


对 应 样式 ， 然 后 包含 一 个 HTMLS 的 hgroup ， 用 于 显示 表单 标题 和 说 明文 字 : 
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8.1.2 


<form id="redemption" methodz'post'» 
<hgroup> 
<hl>Oscar Redemption«/hl» 
«h2»Here's your chance to set the record straight: tell us what 
year the wrong film got nominated, and which film «b»should«/ b» 
have received a nod... «[h2» 


«[hgroup» 
表单 中 的 三 块 子 区 域 都 使 用 带 有 1 egend 标签 的 fi el dset KAŽ: 
<fiel dset > 
<|egend>About the offending film (part 1 of 3)«/legend» 
«di v» 


«label forz'film'»The filmin question?«/label» 
«input idz'film' namez'film' type="text" placeholderz'e.g. King 
Kong" required aria-requiredz'true" > 
«[ di v» 
从 上 面 的 代码 片段 可 以 看 出 ， 每 一 个 输入 元 素 ， 都 有 一 个 | abel 元 素 与 之 对 应 ， 且 一 并 
KARE div 中， 看 起 来 是 很 普通 的 表单 。 不 过 ， 此 处 的 第 一 个 输入 元 素 中 使 用 了 一 个 
HTMLS 的 表单 特性 : 在 id、name 和 type 这 些 普 通 属性 之 后 ， 有 一 个 pl acehol der 




















placeholder 


placeholder 属性 看 起 来 类 似 这 个 样子 : 

placeholder="e. g. King Kong" 

我 们 常常 需要 在 表单 域 中 显示 占 位 符 文字 ,所 以 HTML5 的 设计 者 决定 让 浏览 器 内 建 标 签 
对 其 提供 支持 。 只 需 在 i nput 元 素 中 加 入 placeholder 属性 ， 其 属性 值 就 会 默认 显示 
为 占 位 符 文字 ， 输 入 框 获取 焦点 时 该 文字 自动 消失 。 当 输入 框 失 去 焦点 且 没 有 任何 输入 
值 时 ， 占 位 符 文 字 则 会 再 次 显示 。 

上 节 代 码 片 段 的 pl acehol der 属性 之 后 ， 是 另 一 个 HTML5 表单 特性 requi red 属性 。 









































required 


required 属性 看 起 来 是 这 个 样子 的 : 
required aria-requiredz'true" 


在 支持 HTMLS 的 浏览 器 中 , Æ input 元 素 中 追加 布尔 类 型 的 属性 required (也 就 是 
说 你 可 以 选择 追加 或 不 追加 该 属性 )， 则 表明 该 表单 域 为 必 填 项 。 如 果 表 单 提交 时 该 必 填 
项 没有 任何 信息 ， 浏 览 器 则 会 显示 警告 信息 。 和 警告 信息 的 显示 方式 (包括 显示 内 容 和 样 
R) 取决 于 浏览 器 与 输入 框 类 型 。 除 了 HTMLS Bj required 属性 ， 我们 的 例子 中 还 追 
加 了 一 个 等 价 的 WAI-ARIA 属性 : ari a-required="true" 。 如 果 没 有 特殊 原因 ， 建 议 
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HAHEI WAT-ARIA 版 的 必 填 属性 以 方便 屏幕 阅读 器 用 户 〈 你 应 该 还 记得 ， 我 们 在 
第 4 章 学 习 过 WALARIA 技术 )。 
我 们 之 前 已 经 看 过 Chrome 中 必 填 项 警告 信息 的 效果 ,下 面 的 截图 展示 了 Firefox 中 的 效果 : 








eoo Oscar Redemption: And the winner isn't... 





ÜSCAR REDEMPTION 


HERE'S YOUR CHANCE TO SET THE RECORD STRAIGHT: TELL US WHAT YEAR THE WRONG FILM 
GOT NOMINATED, AND WHICH FILM SHOULD HAVE RECEIVED A NOD... 






Atout the offencing tien (put T 0f X 
Year Of Crime 

The fiim in question? 
Award Won 


Tell us why that's wrong? 





























How you rate it (1 is woeful, 10 is awesomesauce) 5 

What wovkf have won? (prt 2 of 3) 

The film that should have won? e.g. Cable Cuy 

Tell us why it should have won? elle? C OO EENI 

How you rate it (1 is woeful, 10 is awesomesauce) 5 

About you ipart 3 of 3) 

Your Name [Dwight Schultz ] 
Telephone (so we can berate you If you're wrong) [1-234-546758 ] 
Your Email address [dwight schultz@gmail.com ] 
Your Web address www.mysite com 


[aL — ÁÁÓ maa... 














required 属性 可 用 于 多 种 类 型 的 输入 元 素 , 以 确保 表单 域 必须 输入 值 。 r ange 、col or 、 
button 和 hidden 类 型 的 输入 元 素 则 不 能 使 用 requi red ,因为 这 几 种 输入 类 型 几乎 都 
有 默认 值 。 

另 一 个 可 追加 到 输入 元 素 上 的 HTMLS 表单 属性 是 aut of ocus 。 











8.1.4 autofocus 
HTMLS Hj autofocus 属性 可 以 让 表单 在 加 载 完 成 时 就 有 一 个 表单 域 被 默认 聚焦 (或 选 
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中 )， 以 便于 用 户 输入 。 下 面 的 代码 中 被 div OR BS e HG BS ZK FE LURGÉ T — A 
autof ocus 属性 : 





<div> 

«label for="search">Search the site...«[label» 

«input idz"search" namez"search" typez"'search" placeholderz'Wyatt Earp" 
autofocus» 
«[ di v» 
使 用 该 属性 时 要 小 心 。 如果 有 多 个 表单 域 都 被 追加 了 autofocus 属性 , DU AGRO 
器 混乱 。 例 如 有 多 个 表单 域 追 加 了 aut of ocus 属性 ， 在 Chrome (v16) 中 会 聚焦 最 后 一 
个 使 用 aut of ocus 属性 的 表单 域 ,而 Firefox( v9 ) 恰 恰 相 反 ,会 聚焦 第 一 个 使 用 aut of ocus 
的 表单 域 。 


还 有 一 点 需要 注意 ， 有 些 用 户 会 使 用 空格 键 让 网 页 内 容 向 下 滚动 。 如 果 网 页 的 表单 中 含 
有 带 autofocus 属性 的 表单 域 , 则 会 阻止 空格 键 的 默认 行为 , 这 时 敲 击 空 格 键 会 向 已 聚 





























焦 的 输入 框 中 输入 空格 。 显 然 ， 这 会 让 用 户 很 愧 恼 。 
autocomplete 





很 多 浏览 絮 默 认 提供 自动 完成 功能 以 帮助 用 户 输入 。 以 往 用 户 可 以 在 浏览 右 设 置 中 打开 
或 关闭 这 项 功能 ， 现 在 我 们 还 能 告知 浏览 器 我 们 不 想 在 某 个 表单 或 表单 域 上 使 用 自动 完 
成 功能 。 这 不 仅仅 能 保护 敏感 数据 ( 例如 银行 账户 ), 还 可 以 让 你 确保 用 户 用 心 填写 表单 ， 
手工 输入 一 些 值 。 比 如 以 前 在 填写 表单 时 ， 如 果 需 要 填写 电话 号 码 ， 我 就 输入 一 个 假 号 
码 。 我 保证 不 止 我 一 个 人 这 么 做 ( 大 家 不 都 是 填 假 号 码 嘛 ? ) 但 我 也 能 保证 如 果 在 相关 
的 输入 项 上 禁用 自动 完成 功能 ， 那 用 户 肯定 不 会 输入 一 个 假 号 码 。 下 面 的 代码 演示 了 一 
个 禁用 自动 完成 功能 的 表单 项 : 

it forz'tel'»Telephone (so we can berate you if you're wrong)«/label» 

«input idz'tel" name="tel" typez'tel" placeholderz'1-234-546758" 


autocompletez'off" required aria-required-z'true" > 
«[ di v» 


我 们 也 可 以 通过 给 表单 本 身 〈 不 是 fi el dset ) 设置 属性 来 禁用 整个 表单 的 自动 完成 功 
能 。 示 例 代码 如 下 : 


«form id="redemption" method="post" autocompl ete="off"> 






































list (及 对 应 的 datalist 元 素 ) 


list 属性 以 及 对 应 的 dat ali st 元 素 可 以 让 用 户 在 输入 框 中 开始 输入 值 的 时 候 ， 显 示 
一 组 备 选 值 。 下面 是 一 个 包含 在 div 中 的 使 用 1i st 属性 及 对 应 dat ali st 元 素 的 代码 
示例 : 
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«di v» 
«label forz'awardWon"»Award Won«/label» 
«input idz'awardWon" namez'awardWon" type="text" listz'awards'» 
«datalist idz'awards'» 
«select» 
«option valuez'Best Picture'»«/option» 
«option valuez'Best Director"»«/option» 
«option valuez'Best Adapted Screenplay'»«[option» 
«option valuez'Best Original Screenplay'»«/option» 
«[select» 
«[datalist» 
«| di v» 





list 属性 中 的 值 Cawards ) 同时 也 是 datali st 元 素 的 1d。 这 样 就 可 以 让 datali st 
与 输入 项 关联 起 来 。 虽 然 将 opti on ÆRE select 中 不 是 必需 的 ， 但 这 样 做 便于 为 老 
版 本 浏览 器 提供 降级 方案 。 

使 用 了 list 属 性 的 输入 框 看 起 来 就 是 一 个 普通 的 文本 输入 框 ， 当 开始 输入 时 , 输入 框 下 面 
就 会 显示 一 个 数据 选择 框 ， 其 中 包含 从 datalist 中 检索 到 的 匹配 数据 。 在 下 面 的 截图 中 可 
以 看 到 效果 (Firefox v9 )。 在 本 例 中 ， 因 为 datalist 中 的 所 有 option 都 含有 B, MARA 
数据 都 显示 出 来 了 。 

















Best Picture 

Best Picture 

Best Adapted Screenplay R 
Best Original Screenplay 




















1H 2455 A. D 的 时 候 ， 就 只 有 匹配 的 数据 才 被 显示 出 来 ,效果 如 下 图 : 


Best Adapted Screenplay R 
T 














| 








List 输入 框 不 会 阻止 用 户 输入 自己 想 输 入 的 内 容 , 不 过 它 为 我 们 提供 了 一 种 便利 的 方式 
来 添加 输入 提示 功能 ， 增 强 用 户 体验 。 


HTML5 的 新 输入 类 型 


HTMLS 新 增 了 很 多 输入 类 型 ,它们 最 大 的 作用 就 是 可 以 限制 用 户 输 入 的 数据 ,不 需要 引 
入 额外 的 JavaScript 代码 。 这 些 新 的 输入 类 型 最 赞 的 一 点 , 就 是 在 那些 不 支持 新 特性 的 浏 
览 器 中 ， 它 们 会 被 降级 显示 为 一 个 标准 的 文本 输入 框 。 此 外 还 有 很 多 很 有 用 的 腻子 脚本 
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可 以 让 那些 老 版 本 浏览 器 也 跟 上 时 代 。 我 们 稍 后 会 讲 到 这 些 内 容 ， 现 在 先 来 看 看 这 些 新 
的 HTMLS 输入 类 型 以 及 它们 所 带 来 的 便利 。 





1. email 
type=" emai | "一 一 支持 它 的 浏览 需 会 期 望 用 户 的 输入 匹配 电子 邮箱 的 格式 。 下 面 的 示 
例 代 码 中 我 们 将 type="email" 与 required' 和 'placeholder' 组合 起 来 使 用 : 
<div> 

«label for="email">Your Email address</label > 

«input id="email" name="email" typez'email' 


placehol derz'dwight.schultzQggmail.com" required aria-required="true"> 
«[ di v» 


当 提交 一 个 不 符合 格式 的 输入 值 时 ， 浏 览 器 会 生成 警告 信息 : 


Please enter an email address. 




















此 外 ,许多 触摸 屏 设备 ( 如 Android, iPhone 等 等 ) 会 根据 输入 类 型 改变 键盘 模式 。 下 图 
显示 了 type="email'" 的 输入 框 在 iPad 上 的 使 用 效果 。 注 意 看 输入 键盘 上 那个 方便 输入 
邮箱 地 址 的 @ 符 号 : 














SUBMIT REDEMPTION 


UNSUNG HEROES... 
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2. number 
typez'number "一 一 支持 该 特性 的 浏览 器 期 望 输入 一 个 数字 。 这 种 输入 类 型 默认 还 提供 
控制 按钮 ， 人 允许 用 户 简单 地 点 击 向 上 或 向 下 来 改变 数值 。 代 码 示 例如 下 : 
«di v» 


«label forz'yearOfCri me"»Year Of Cri me«/label» 
«input idz"yearOfCri me" namez"yearOfCri me" typez'number" minz"'1929" 
max="2015" required aria-required-'true" > 
«[ di v» 


FERRER Y 2i A TEE TE LRZ REEN Vds PIIR (Chrome v16 ): 








1929 : 














如 果 你 输入 一 个 非 数 字 , 浏览 器 会 做 些 什么 呢 ? Chrome ( v16 ) 会 在 输入 框 失 去 焦点 时 清 
除 输入 值 ， 除 此 之 外 没有 其 他 反馈 ; 而 Firefox (v9 ) 则 允许 你 输入 任何 值 ( 变 成 了 一 个 
标准 的 文本 输入 框 ), 你 可 能 注意 到 在 上 面 的 代码 中 , 我 们 还 设置 了 人 允许 输入 的 最 小 值 和 
最 大 值 范围 ， 具 体 代 码 如 下 : 

typez'number" minz"1929" maxz"'2015" 

超出 范围 的 数字 会 (应 该 ) 得 到 特殊 对 待 。 浏 览 器 的 具体 实现 也 不 相同 ，Chrome (v16 ) 
会 显示 一 个 警告 信息 而 Firefox ( v9) 则 什么 都 不 做 。 


3. Url 











typesz"url" 你 猜 对 了 ，URL 输入 类 型 用 于 输入 URL 地 址 。 与 tel 和 email 输入 
类 型 类 似 ， 它 看 起 来 和 标准 的 文本 输入 框 一 样 。 不 过 有 些 浏 览 器 会 在 提交 不 合法 的 URL 
时 显示 特定 的 警告 信息 。 对 应 的 代码 示例 如 下 ， 示 例 中 包含 了 pl acehol der 属性 : 


<div> 

«label for="web">Your Web address</label> 

«input id="web" name="web" type="url" placehol der="www. mysite.com'» 
«[ di v» 


下 面 的 截图 显示 了 在 Chrome 中 提交 一 个 不 合法 URL 地 址 时 的 效果 : 














sausage 


E Please enter a URL. 
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和 type="emai1" 类 型 一 样 , 触摸 屏 设备 也 会 为 URL 输入 框 修改 键盘 模式 。 下 图 显示 了 
iPad EF types" url" 的 使 用 效果 : 









































看 到 键盘 上 的 Go、 斜 杠 (/) 和 .com 这 几 个 按键 了 吗 ?” 因 为 我 们 要 输入 URL 地 址 ， 所 以 
设备 为 我 们 专门 显示 了 匹配 的 键盘 ( 除非 你 没准 备 访问 .com 网 站 ， 这 种 情况 下 你 就 用 不 
着 感谢 苹果 公司 )。 

4. tel 


type="tel" 是 男 一 种 用 于 收集 联系 人 信息 的 输入 类 型 tel 表示 表单 域 期 望 输入 一 个 
话 号 码 。 示 例 代码 如 下 : 


<div> 
«label for="tel">Tel ephone (so we can berate you if you're wrong) </label> 
«input idz'tel" namez'tel" typez'tel" placeholderz'1-234-546758" 
autocompletez'off" required aria-requiredz'true" > 
«[ di v» 























gu 
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尽管 tel 类 型 被 设计 为 输入 数字 格式 ,但 在 包括 较 新 的 Chrome v16 和 Firefox v9 在 内 的 














供 任何 合理 的 警告 信息 ”。 








很 多 浏览 带 中 ， 它 的 表现 和 普通 文本 输入 框 一 样 。 目 前 这 些 浏 览 器 没有 对 无 效 输 入 值 提 


不 过 好 的 一 点 就 是 ， 和 对 待 emai | Muri 类 型 一 样 , 触摸屏 设备 为 这 种 类 型 由 心地 提供 
了 数字 键盘 以 便 完 成 输入 st el 输入 类 型 在 iPad 上 的 使 用 效果 如 下 ( 10S 5 上 的 运行 效果 ): 









































SUBMIT REDEMPTION 


UNSUNG HEROES... 








注意 看 键盘 上 是 不 是 少 了 字母 按键 ， 而 优先 显示 了 数字 按键 ? 这 样 就 可 以 让 用 户 更 快 地 


输入 正确 的 数值 。 


5. Search 


type="search" 一 一 和 普通 文本 输入 框 的 表现 基本 一 样 ， 仅 在 个 别 浏览 器 中 泻 染 得 有 点 


细微 差别 。 示 例 代码 如 下 : 


























电话 号 码 的 输入 格式 和 验证 规则 ， 不 同 地 区 可 能 有 所 不 同 。 不 提供 统 

















验证 也 可 以 到 


E 解 。 一 一 译 者 注 
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«di v» 

«label forz'search'»Search the site...«[label» 

«input idz'search" namez'search" typez'search" placehol der="Wyatt Earp'» 
«[ di v» 


在 Firefox ( v9 ) 中 的 显示 效果 如 下 图 ， 注 意 输入 框 的 默认 样式 是 矩形 状 : 











Search the site... Wyatt Earp 














但 是 在 Chrome (v16) 中 的 默认 泻 染 效果 则 稍 有 不 同 ， 输 入 框 是 圆 角 的 ， 且 输入 框 右 侧 
有 一 个 快速 清除 按钮 : 














Search the site... ^ Quick Clear --> 











6. pattern 

pattern="" 一 一 “害怕 , 非常 害怕 ”( 还 记得 这 句 台词 出 自 哪 部 电影 吗 ? ”)。 在 我 看 来 ， 

这 句 话 用 来 描述 正则 表达 式 很 合适 。 如 果 你 不 知道 正则 表达 式 是 何 物 ， 那 么 我 只 好 说 不 

知 是 福 。 如 果 你 知道 ， 而 且 更 厉害 的 是 你 还 理解 其 含义 , 那 下 面 的 内 容 就 是 给 你 准备 的 。 
学 习 正 则 表达 式 


如 果 你 在 万 圣 节 的 午夜 一 个 人 在 墓地 里 看 过 《 驱 魔 人 》”， 那 你 就 可 以 去 
学 习 正 则 表达 式 了 : http://en.wikipedia.org/wiki/Regular_expressions。 





























你 可 用 pattern 属性 通过 正则 表达 式 来 定义 表单 域 的 数据 格式 。 示 例 代码 如 下 : 
<div> 
a ob forz'name'»Your Name (first and last)«/label» 
«input idz'name" name="name" patternz'([a-zA-Z] (3,30]|s*) *[a-zA- Z]{3,30}" 
placehol derz"Dwight Schultz" required aria- requiredz'true" > 
«I di v» 
我 在 网 上 搜索 了 大 约 458 秒 终于 找到 了 一 个 验证 姓名 的 正则 表达 式 ， 这 是 作者 的 义务 。 
TE pattern 属性 中 放置 一 个 正则 表达 式 , 支持 该 特性 的 浏览 带 就 会 按照 指定 格式 验证 输 
入 值 。 当 和 required 属性 组 合 使 用 时 ,一旦 输入 不 符合 格式 的 值 ， 浏 览 带 就 会 有 如 下 
图 所 示 的 反应 。 本 例 中 我 的 输入 值 缺少 姓氏 : 














(D IH EI (the Fly), PLA CAIA Jo 
@《 驱 魔 人 》http://movie.douban.com/subject/1293755/。 
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Benl 
| E Please match the format requested. 
7. color 


type=" col or "一 一 会 在 支持 该 特性 的 浏览 器 中 生成 一 个 颜色 选择 器 ， 让 用 户 可 以 选择 
十 六 进 制 的 颜色 值 。 示 例 代码 如 下 : 


<div> 
«label forz'color"»Your favorite color«/label» 
«input idz'color" namez'color" typez'color'» 











«I di v» 

翡 剧 的 是 ， 目 前 很 少 有 浏览 器 支持 该 特性 ， 好 像 呈 有 Opera (v11) 支持 。 如 果 浏 览 器 默 
认 的 颜色 选择 器 中 没有 所 需 的 颜色 , 点 击 下 方 的 Other... 按 钮 就 会 打开 操作 系统 默认 的 颜 
色 选择 器 : 








A 
* 


#000000 
Other... 














日 期 和 时 间 输 入 类 型 


新 的 date 和 ti me 输入 类 型 背后 的 设计 思想 , 是 想 为 选择 日 期 和 时 间 提 供 一 致 的 用 户 体 
验 。 如 果 你 曾经 在 网 上 买 过 演出 门票 ， 那 你 就 可 能 用 过 某 种 日 期 选择 器 。 这 种 功能 一 般 
都 是 由 JavaScript ( 如 jQuery ) 提供 ， 但 我 们 希望 能 仅 通 过 HTMLS 标签 就 实现 这 种 常用 
功能 。 

1. date 

示例 代码 如 下 : 

«input id="date" typez'date" name="date" /> 

和 col or 类 型 一 样 ， 目 前 对 date 提供 原生 支持 的 浏览 器 寥寥 无 几 ， 大 多 数 浏 览 器 默认 
都 将 其 演 染 为 标准 的 文本 输入 框 。 超 级 棒 的 Opera 已 经 实现 了 这 个 功能 ， 下 图 显示 了 示 
例 代 码 在 Opera (v11) 中 的 泻 染 效果 : 
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| Mon Tue Wed Thu i Sat Sun 





27 

















date 和 time 输入 类 型 有 很 多 不 同 的 变种 。 下 面 是 对 其 他 变种 类 型 的 简要 介绍 。 

2. month 

示例 代码 如 下 : 

«input id="month" typez'month" name="month"> 

选择 器 界面 允许 用 户 选 择 某 个 月 ， 输 入 框 中 会 被 填充 为 年 和 月 组 成 的 值 ， 如 2012-06。 
下 图 显示 了 浏览 器 中 的 效果 : 









































3. week E 


示例 代码 如 下 : 


«input id="week" typez"'week" name="week"> 


使 用 week 类 型 时 ， 选 择 器 允许 用 户 选 择 一 年 中 的 某 一 周 ， 输 入 框 中 会 被 填充 格式 如 
2012-W47 这 样 的 数据 。 
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下 图 显示 了 浏览 需 中 的 效果 : 














November 
Mon Tue Wed Thu 
29 30 31 1 
5 6 7 8 
12 13 14 15 


19 20,21 22 
26 27 28 29 
3 4 5 6 





2012-W47 














4. time 
示例 代码 如 下 : 


«input id="time" typez'ti me" name="time"> 
ti me 输入 类 型 允许 输入 一 个 24 小 时 制 的 时 间 值 ， 如 23:50; 
在 支持 该 特性 的 浏览 器 中 ， 会 显示 出 加 减 控制 按钮 ， 且 仅 允 许 输入 时 间 值 : 


23:50| — 


5. datetime 和 datetime-local 
示例 代码 如 下 : 


«input idz'dateti me" typez'dateti me" name="datetime"> 


在 Opera (v11) 中 的 显示 效果 如 下 : 




















2012-01-11 M[00:00 Œ urc 


o January 

Mon Tue Wed Thu 

26 27 28 29 
3 4 5 
10 11. 12 








17 18" 19 
24 25 26 
31 
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Clear 
Tue Jan 10 | 4 |10 |AM | 
Today | 5 111 |PM | 


We 


LJan 11, 2012 5:11 PM n 








日 期 时 间 选 择 器 会 生成 一 个 由 日 期 、 时 间 和 时 区 组 成 的 值 ， 日 期 与 时 间 之 间 用 T 分 制 ， 
使 用 z 表示 协调 世界 时 ,使 用 正 负 值 表示 时 区 偏 移 。 协调 世界 时 的 2009 年 10 月 25 日 显 
示 如 下 : 

2009-10-25705:05:00Z 

协调 世界 时 ( UTC ) 与 格林 尼 治 标准 时 (GMT ) 在 大 多 数 实 际 应 用 中 基本 一 样 。 时 区 偏 
移 则 很 好 理解 ， 比 如 , 北京 时 间 比 格林 尼 治 标准 时 提前 8 小 时 (UTC +8 )， 反 映 到 输入 值 
上 ， 效 果 如 下 : 

2009-10-25705:05:00+8: 00 


dateti me-local 输入 类 型 和 dateti me 几乎 完全 一 样 ， 只 是 省 略 了 时 区 信 ， 














证 
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修改 步 增值 

M 你 可 以 使 用 Step 属性 来 修改 各 种 输入 类 型 控制 按钮 的 步 增 值 。 比 如 ， 要 
将 时 间 的 步 增值 改 为 4 个 小 时 , 将 step 的 属性 值 设 为 14400 秒 ( 4x60x60 ) 
即 可 。 将 datetime 的 步 增值 改 为 4 小 时 的 示例 代码 如 下 : 


«input idz'dateti me" type="dateti me" name="datetime" step="14400"> 


6. range 
range 输入 类 型 会 生成 一 个 滑动 条 。 示 例 代 码 如 下 : 


«input idz'howYouRatelt" namez'howYouRatelt" typez'range" minz'1" max="10" 
valuez'5" > 


在 Safari ( v5.1 ) 中 的 效果 如 下 图 : 






































默认 的 输入 范围 是 0 到 100。 但 上 面 的 示例 代码 通过 mi n 和 ma x 将 范围 设 定 为 1 到 10。 


range 输入 类 型 最 大 的 一 个 问题 是 它 从 来 不 给 用 户 显 示 当 前 的 输入 值 。 虽 然 滑 动 条 仅 被 
设计 用 来 选择 模糊 的 数值 , 但 我 还 是 经 常 想 看 看 它 的 当前 值 。 使 用 HTML5 目前 无 法 解决 
这 个 问题 ， 但 是 如 果 你 确实 需要 显示 请 动 条 的 当前 输入 值 ， 可 以 通过 JavaScript 来 实现 。 
将 上 面 的 示例 代码 稍 作 修改 : 


«input idz'howYouRatelt" namez'howYouRatelt" typez'range" minz'1" maxz'10" 
valuez'5" onchangez'showValue(this.value)"»«span idz'range'»5«/span» 

我 们 增加 了 两 个 东西 ， 一 个 是 onchange 属性 ， 另 一 个 是 id 为 range 的 Span 元 素 。 
接 下 来 再 将 下 面 这 段 JavaScript 代码 加 入 页 面 : 

«script» 


function showVal ue( newVal ue) 


{ 
document.getElementByl d("range").i nnerHTMLznewVal ue 


} 
</script> 
这 样 做 就 能 获取 滑动 条 的 当前 输入 值 , 将 其 显示 在 id 为 range 的 元 素 (span 标签 ) 中 。 
再 用 一 点 CSS 将 显示 文字 的 字号 变 大 、 颜 色 变 红 即 可 。 下 图 显示 了 修改 后 的 滑动 条 在 滑 
动 过 程 中 的 显示 效果 : 

















































































































How you rate it (1is woeful, 10 is awesomesauce) 
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8.2 


其 实 还 有 一 些 和 表单 有 关 的 HTMLS 新 特性 ， 但 是 这 些 特 性 更 多 的 都 是 
和 应 用 开发 及 服务 器 端 开发 相关 ,所 以 没 在 此 处 做 讲解 。 想 要 参阅 W3C 
有 关 HTMLS 表单 部 分 的 工作 草案 ， 请 访问 : http;//dev.w3.org/html5/ 


spec-author-view/forms.htmlzforms 。 





如 何 给 不 文 持 新 特性 的 浏览 器 打 补 丁 


前 面 把 HTMLS 表单 的 功能 吹 上 了 天 , 但 要 想 实际 使 用 则 还 有 两 个 非常 麻烦 的 问题 : 一 是 
支持 表单 新 特性 的 浏览 器 在 具体 实现 上 有 所 不 同 ; 二 是 对 完全 不 支持 新 特性 的 浏览 器 如 
何 处 理 。 万 幸 的 是 ，Web 社区 一 如 既往 地 拿 出 了 解决 办 法 。 

回 到 第 4 章 ， 我 提 过 一 个 非常 棒 的 JavaScript 框架 叫做 Modernizr ( http:/www.modernizr. 
com )， 用 于 向 缺少 HTMLS/CSS3 REPES RERNI wA] o Fi Alexander Farkas 编写 的 
"Webshims Lib" ( http://afarkas.github.com/webshim/demos/ ) 就 是 构建 于 Moderniz 和 无 处 
不 在 的 jQuery 之 上 的 ， 它 可 用 于 插入 表单 补丁 (也 可 以 为 其 他 HIMLS 特性 打 补 丁 )， 从 
而 使 不 支持 新 特性 的 浏览 器 可 以 处 理 HTMLS 表单 。 最 值得 称道 的 一 点 是 ， 它 利用 了 
Modernizr 的 加 载 功 能 ， 能 做 到 只 加 载 实 际 所 需 的 补丁 。 如 果 在 原生 支持 HTMLS 新 特性 
的 浏览 器 中 查看 网 页 ， 则 仅 会 给 网 页 加 入 一 丁点 儿 宛 余 代码 。 而 对 于 老 版 本 浏览 器 ， 虽 
然 它 们 需要 加 载 更 多 的 代码 ( 因为 它们 本 身 能 力 不 足 )， 但 通过 相关 JavaScript 方法 的 辅 
助 ， 它 们 能 提供 基本 一 致 的 用 户 体 验 。 

通过 打 补 丁 受益 的 不 仅仅 只 是 老 版 本 浏览 器 。 我 们 知道 ， 现 在 的 很 多 浏览 器 也 没有 完全 
实现 HTMLS 的 表单 特性 。 在 网 页 中 引入 Webshims Lib 可 以 弥补 这 些 浏览 器 的 缺陷 。 例 
如 在 Safari F, 提交 一 个 必 填 项 为 空 的 HTML5 表单 时 不 会 有 任何 警告 信息 。 其 实 这 个 表 
单 根本 不 会 提交 , 但 它 也 没 给 用 户 任何 反馈 , 这 一 点 都 不 人 性 化 。 在 页 面 中 引入 Webshims 
Lib 后 ， 上 述 问 题 会 得 到 弥补 : 







































































value missing 


当 Firefox (v9) 无 法 给 type="number'" 属性 提供 控制 按钮 的 时 候 ，Webshims Lib 也 可 
以 提供 一 个 合理 的 jQuery 解决 方案 。 总 之 ， 它 是 一 个 好 用 的 工具 ， 建 议 你 立即 下 载 这 个 
小 巧 的 工具 包 , 然后 在 页 面 中 使 用 ,这样 我 们 就 可 以 继续 编写 HTMLS 表单 ， 而 所 有 用 户 
都 可 以 放心 地 看 到 他 们 需要 的 表单 了 (不 包括 使 用 IE 6 且 禁 用 JavaScript 功能 的 那 两 个 
人 一 一 你 知道 我 在 说 谁 一 一 快 别 这 么 干 了 ! )。 























图 灵 社 区 会 员 lemoggy(lemoggy@foxmail.com) zz 尊重 版 权 





204 


$83 用 HTML5 和 CSS3 征服 表单 





8.3 


首先 下 载 Webshims Lib ( http://github.com/aFarkas/webshim/downloads ) 并 解压 。 然 后 将 
其 中 的 js-webshim 文件 夹 复 制 到 相应 的 位 置 。 为 简便 起 见 ， 本 例 中 我 将 其 拷贝 到 网 站 的 
根 目 录 ， 然 后 在 页 面 的 <head> 部 分 加 入 如 下 代码 : 


«script src="js/j query-1.7.1.js"></script> 
«script srce"js-webshi m minified/extras/modernizr- custom.js'»«/scri pt» 
«script srce"js-webshi m minified/polyfiller.js'»«[script» 
«script» 
1 加载 补丁 
$.webshims.pol yfill(]); 
«script» 


分 析 一 下 这 段 代码 。 首 先 引 入 了 一 个 本 地 的 jQuery 库 文件 (可 以 在 www.jquery.com 上 下 
载 最 新 版 本 ): 

«script srce'js/jquery-1. 7. 1.js'»«[scri pt» 

接着 ， 又 引入 了 Webshims Lib 所 包含 的 Modernizr 以 及 补丁 相关 的 JavaScript 文件 : 


«script srce'js-webshi m minified/extras/ modernizr-custom.js'»«/scri pt» 
«script srce'js-webshi m minified/polyfiller.js"'»«[script» 


最 后 ， 使 用 初始 化 脚本 来 加 载 所 需 的 补丁 : 


«script» 
1 加 载 补丁 
$.webshi ms. pol yfill(]); 
«script» 


搞定 。 现 在 ， 浏 览 需 缺 失 的 新 功能 都 会 通过 相关 补丁 脚本 被 自动 追加 进来 。 太 棒 了 ! 

















使 用 CSS3 美化 HTML5 表单 


现在 我 们 的 表单 实现 了 路 浏 览 锅 一 致 的 功能 表现 ， 同 时 也 有 一 些 基 本 样式 。 你 我 都 知道 ， 
使 用 CSS3 可 以 让 表单 的 样式 更 美观 。 我 们 应 用 一 些 之 前 已 经 学 习 过 的 技巧 , 来 使 表单 更 
加 活 色 生 香 。 目 前 我 们 的 表单 样式 如 下 : 


sredemption { 
wi dth: 10095 
font-family: 'ColaborateThi nRegular'; 
font-weight: 400; 

] 

sredemption hgroup ( 
margin-bottom: 20px; 

} 

#redemption div { 
width: 100%; 
margin-bottom: 15px; 
float: left; 

} 
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*redempt 
float: 


ion span£range ( 
left 


font-size: 

width: 100 

color: red 

clear: bot 
ext-align 

} 

#howYouRateT 

ext-align 

} 

#redemption 

ont-s 

color: #43 

ont-size: 

mar gi n- bot 
loat: lef 
width: 100 

} 

#redemption 
border: 1p 
padding: 2 
margin-bot 

} 

#redemption 
width: 
float: lef 

} 

#redemption 
height: 20 
font-size: 
width: 40% 
float: rig 

} 











yle: 


40 %; 


3em 

% 

h; 

: center; 


his, #yearOfCrime { 
s E e 


egend { 
italic; 

4242; 

0. 8em; 

om: 20px; 


% 
ieldset { 


x dotted £cccccc 
% 





input { 
px; 
lem; 


ht; 


*redemption textarea { 


height: 60 
ont-size: 


px; 
lem 


width: 
loat 


} 
# 


一 


edempt 
ext-d 
height 
ont 

backgr 
border 
color: 
float: 
margin 
backgr 





40%; 
right 


ion input#submit { 
ecoration: none; 

: 34px; 

1.25em /* 36px + 16 */ 
ound-color: #b01c20; 
-radi us: 8px; 

white; 

right 
-bottom: 10px; 
ound: linear-gradient(top, 


'BebasNeueRegular'; 


rgb(241,92,96) 09, rgb(17 


100%); 


margin 
box-sh 
text-s 


-top: 
adow 
hadow 


10px; 
5px 5px 5px hsla(0, 0% 
0px 1px black; 


26.6667% 0.8); 
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border: 1px solid £bfbfbf 


} 

.polyfill-important .input-range,.polyfill-important .step-c 
float: right; 

} 

.polyfill-important .step-controls { 
margin-right: -20px!i mportant; 

} 





唯一 需要 注意 的 地 方 是 最 后 两 个 样式 只 在 相应 的 补丁 脚本 运行 时 发 挥 作 用 。 
首先 ， 我 想 让 每 个 fiel dset 都 有 一 个 好 看 的 渐变 背景 ， 相 互 之 间 稍 微 空 开 一 点 。 下 面 
是 针对 fiel dset 修改 后 的 CSS 代码 : 


#redemption fieldset { 
border: lpx dotted £cccccc 
padding: 295 
margin-bottom: 20px 
background: #ffffff 
background: linear-gradient(top, #ffffff 77% #f2f2f2 100%) 
border-radius: 4px; 
box-shadow: 2px 2px 5px hsla(0, 0% 16.6667% 0.3) 
} 


BRT AAMER ER, 我 们 唯一 需要 做 的 就 是 再 加 一 点 点 阴影 (box- shadow ) 效 果 。 
和 前 面 的 很 多 例子 一 样 ， 我 在 此 处 省 略 了 各 种 CSS3 声明 的 浏览 带 私 有 前 级 ( 本 例 中 有 


linear-gradient , border-radius 和 box-shadow)。 


修改 之 后 在 Chrome 中 的 效果 如 下 图 所 示 : 











Oscar Redemption And € 


VYVVYVYVNNNNNNNNNNNNNNNNNNNNN. 
AND THE WINNER IS 


WHY? SYNOPSIS REDEMPTION VIDEOS/CLIPS QUOTES Quiz 


mem OSCAR REDEMPTION 


HERE'S YOUR CHANCE TO SET THE RECORD STRAIGHT: TELL US WHAT YEAR THE WRONG 
FILM GOT NOMINATED, AND WHICH FILM SHOULD HAVE RECEIVED A NOD... 
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混用 各 种 颜色 值 


M 在 整个 示例 代码 中 ， 你 可 以 看 到 我 混用 了 各 种 颜色 值 。 有 时 是 red 这 样 的 

Q 颜色 名 称 ， 有 时 是 十 六 进 制 、RBG 或 HSL。 在 支持 这 些 颜 色 模式 的 浏览 
器 中 这 样 做 没什么 问题 。 但 在 实际 生产 环境 中 ， 为 保持 一 致 性 和 兼容 性 ， 
你 应 该 只 选用 一 两 种 颜色 模式 。 


目前 看 起 来 效果 还 不 错 , 但 那些 文本 输入 框 依然 有 点 枯燥 。 我 们 用 下 面 的 CSS3 代码 来 为 
其 润色 一 下 : 


input, textarea, select ( 
border: 1px solid £bfbfbf; 
padding: 0.2em 
font-size: 1.1em; 
line-height: 1.2em 
background: £sffffff; 
background: linear-gradient(top, #ffffff 0%, #ededed 8%, #ffffff 1009); 
border-radius: 4px; 
box-shadow: 2px 2px 5px hsla(0, 0% 16.6667% 0.1); 
} 


这 里 又 一 次 使 用 了 背景 渐变 , 加 了 圆 角 , 还 有 一 点 恰到好处 的 阴影 。 现 在 Chrome 中 的 效 
果 如 下 图 : 








Oscar Redemption: And th 


VVVVVVVVVVVV VAN NN NN. 
AND THE WINNER IS 


WHY? SYNOPSIS REDEMPTION VIDEOS/CLIPS QUOTES QUIZ 


PL. OSCAR REDEMPTION 


HERE'S YOUR CHANCE TO SET THE RECORD STRAIGHT: TELL US WHAT YEAR THE WRONG 
FILM GOT NOMINATED, AND WHICH FILM SHOULD HAVE RECEIVED A NOD... 


€ 
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这 个 效果 我 很 满意 …… 噢 ， 等 等 。 看 看 最 下 面 的 滑动 条 ， 这 可 不 是 我 想 要 的 效果 。 我 不 
想 让 刚才 的 那些 规则 影响 滑动 条 ,所 以 我 使 用 了 一 个 CSS3 选择 器 的 新 特性 来 选 出 我 想 要 


的 元 素 : 





input:not([type="range"]), textarea, selectí( 


1 * 样式 */ 
} 





我 使 用 : not. 这 个 否定 选择 器 来 排除 type="range" 类 型 的 输入 元 素 ， 再 来 看 看 Chrome 


中 的 效果 : 





Oscar Redemption And 1> 





CVVVVVYVVYVVNYNNNYNNNNNNNNNYNNV S. 


AND THE WINNER IS 
WHY? SYNOPSIS REDEMPTION VIDEOS/CLIPS Qurs auz 
wmm OSCAR REDEMPTION 
3E -— 
HERE'S YOUR CHANCE TO SET THE RECORD STRAIGHT: TELL US WHAT YEAR THE WRONG 
FILM GOT NOMINATED, AND WHICH FILM SHOULD HAVE RECEIVED A NOD... 
OVERHYPED NONSENSE... 

















太 帅 了 ! 这 就 是 我 想 要 的 效果 ，CSS3 不 仅 能 轻松 地 追加 样式 ， 而 且 也 能 有 效 阻止 在 不 需 


要 的 元 素 上 追加 样式 。 


针对 表单 的 CSS3 伪 类 选择 器 
除 丁 前面 已 双 了 解 的 那些 有 趣 的 CSS3 工具 之 外 ，CSS3 还 提供 了 一 些 专门 针对 表单 的 伪 


类 选择 器 。 





Dinput:focus: valid: 


图 灵 社 区 会 


Oinput: required: 选择 必 填 表单 域 ; 
Dinput:focus: invalid: 





选择 当前 聚焦 的 且 含 有 非法 输入 值 的 表单 域 ; 





选择 当前 聚焦 的 且 含 有 合法 输入 值 的 表单 域 。 
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我 们 使 用 上 面 的 伪 类 选择 器 再 编写 三 条 新 规则 : 
input:required ( 

border: 1px solid rgba(253, 8, 8, 0.29) 
} 


input:focus:invalid { 
background: url('../img/cross.png') no-repeat right; 
padding-right: 3px; 

} 

input:focus:valid { 
background: url('../img/tick.png') no-repeat right; 
padding-right: 3px; 

} 


第 一 个 规则 给 必 填 表单 域 加 了 一 点 红色 边框 。 当 用 户 输入 时 ， 如 果 所 输入 的 值 不 符合 规 
定格 式 ， 则 第 二 个 样式 会 给 当前 的 输入 框 加 上 一 个 红色 又 号 ; 如 果 输 入 值 符合 格式 ， 则 
第 三 个 样式 会 给 其 加 上 一 个 绿色 对 号 。 

下 面 的 截图 显示 了 浏览 器 (Firefox v9 ) 加 载 完 页 面 的 效果 : 














About the offending film (part 1 of 3) 


ilm jon? ^ 
The film in question e.g. King Kong 
Year Of Crime 
Award Won 
Tell us why that's wrong? I fell asleep within 20 minutes... 
How you rate it (1 is woeful, 10 is awesomesauce) g 











如 果 我 们 聚焦 (点击 ) 到 一 个 必 填 输入 框 ， 右 侧 就 会 出 现 一 个 红色 又 号 〈 因 为 我 们 还 没 
输入 有 效 的 值 ): 





About the offending film (part 1 of 3) 
The film in question? x 


R 


Year Of Crime Please fill out this field. 


Award Won 


Tell us why that's wrong? I fell asleep within 20 minutes... 





How you rate it (1 s woeful, 10 is awesomesauce) d 
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8.4 


如 果 我 们 输入 一 个 有 效 的 值 ， 红 色 的 义 号 就 变 成 


了 绿色 的 对 号 : 





The film in question? 


Year Of Crime 


Award Won 


Tell us why that's wrong? 


How you rate it (1 is woeful, 10 is awesomesauce) 





King Kong X v 











使 用 这 些 新 的 CSS3 伪 类 选择 器 可 以 制作 出 优美 的 、 易 于 实现 的 增强 效果 , 可 以 大 大 提升 





用 户 填写 表单 的 用 户 体验 。 


小 结 


在 本 章 , 我 们 学 习 了 如 何 使 用 一 堆 新 的 HTML5 表单 属性 。 这 些 属 性 可 以 让 表单 比 以 前 更 
好 用 ,收集 的 信息 比 以 前 更 精准 。 此 外 ， 我们 可 以 通过 JavaScript 对 象 检 测 ， 有 条 件 地 加 














载 JavaScript 补丁 脚本 ,从 而 保证 这 些 新 标签 和 届 
能 如 何 都 能 为 表单 提供 类 似 的 用 户 体验 。 





性 是 面向 未 来 的 , 这样 不 论 浏 览 絮 的 功 





我 们 的 响应 式 HTMLS 和 CSS3 之 旅 就 快 结束 了 。 我 们 讲述 了 大 量 理 论 ， 同 时 也 制作 了 





AND THE WINNER ISN'T 这 个 示例 网 站 。 但 是 ， 











在 实际 制作 响应 式 网 站 时 经 常会 遇 到 更 


多 的 挑战 。 如 何 处 理 小 屏幕 上 的 一 大 堆 导 航 链接 ? 如 何 仅 为 有 实际 需要 的 浏览 需 加 载 额 





外 的 资源 文件 ”在 最 后 一 章 中 , 我 们 将 探讨 基于 








HTMLS fill CSS3 的 响应 式 设计 经 常 遇 到 


的 问题 ( 以 及 解决 方案 )。 我 们 还 会 再 说 说 ， 如 何以 最 佳 方式 处 理 那些 有 特定 缺陷 的 老 版 


本 浏览 需 。 
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解决 跨 浏览 器 问题 


在 最 后 一 章 ， 我 们 将 学 习 以 下 内 容 

Q 渐进 增强 和 优雅 降级 之 间 的 根本 区 别 

口 如 何 让 老 版 本 Internet Explorer 支持 响应 式 设计 

口 何如 使 用 Modernizr 按 需 加 载 CSS 文件 

口 何如 使 用 Modernizr 按 需 加 载 JavaScript 补丁 文件 

口 如 何 将 超 长 导航 列表 在 小 视 口 中 转换 为 选择 菜单 

口 如 何 为 高 分 辩 率 ( 视网膜 ) 显示 屏 提供 匹配 图 片 

在 学 习 最 后 一 章 之 前 ， 先 回顾 一 下 我 们 当前 的 处 境 和 状况 。 

移动 设备 使 用 量 呈 爆炸 式 增长 。 因 此 用 户 会 使 用 各 种 各 样 的 视 口 〈 不 同 的 尺寸 和 方向 ) 
和 带宽 来 浏览 网 页 。 在 可 预见 的 未 来 ， 我 们 需要 以 基本 内 容 、 分 层 特性 和 渐进 增强 为 基 
准 来 设计 和 制作 网 站 。 此 外 ， 考 虑 到 带宽 差异 ， 网 站 代码 应 该 尽 可 能 保持 简洁 和 灵活 。 
从 设计 角度 看 , 我 们 已 经 完整 学 习 了 Ethan Marcotte 提出 的 响应 式 设计 的 三 种 方法 。 CSS3 
媒体 查询 (第 2 章 ) 用 于 创建 设计 断 点 ， 从 而 使 网 页 布局 可 以 完美 匹配 各 种 视 口 。 而 结 
合流 动 布局 的 弹性 图 片 和 多 媒体 技术 (第 3 章 )， 则 可 以 保证 网 页 在 这 些 媒体 查询 断 点 之 
间 的 平 请 过 渡 。 响 应 式 设 计 的 结果 就 是 设计 不 仅 在 今天 流行 的 视 口 上 表现 完美 ， 而 且 是 
面向 未 来 的 。 

为 了 保持 代码 简洁 ， 第 4 章 我 们 将 页 面 标签 换 成 了 HTMLS. HTMLS 能 提供 更 加 精简 和 
语义 丰富 的 代码 ， 而 且 为 我 们 融 来 了 诸如 离线 访问 等 新 特性 。 此 外 ， 我 们 还 在 页 面 代码 
中 使 用 了 一 些 无 障碍 网 页 应 用 技术 ( WAI-ARIA ) 以 增强 可 用 性 ,为 依赖 屏幕 阅读 器 和 辅 
助 技术 的 用 户 提供 额外 的 帮助 。 

在 第 5 章 和 第 6 章 , 我 们 领略 了 CSS3 的 强大 威力 和 灵活 性 , 学 习 了 新 的 RGBA fll HSLA 
颜色 模式 ， 以 及 如 何不 依赖 图 片 而 仅 使 用 CSS3 来 制作 盒 阴 影 、 文 字 阴 影 、 背 景 渐变 等 各 
种 常见 的 设计 效果 。 此 外 , 强大 的 CSS3 选择 器 可 以 让 我 们 选择 DOM 中 任意 需要 的 元 素 ， 
而 这 种 能 力 以 往 必须 依靠 JavaScript 才能 实现 。 但 CSS3 不 只 能 用 来 调整 设计 效果 或 者 大 
幅 降低 浏览 网 页 所 需 的 带宽 消耗 ， 更 重要 的 是 还 为 我 们 带 来 了 一 些 在 以 往 没有 Flash 或 
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JavaScript 就 不 敢 奢 望 的 新 特性 : 自 定义 字体 (第 5 章 ) 以 及 不 同 视觉 状态 间 的 优雅 平滑 
的 过 渡 效 果 (第 7 章 )。 放 眼 未 来 ， 我 们 还 了 解 了 一 些 比 较 复 杂 的 特性 ， 如 CSS3 的 3D 
转换 。 

最 后 在 第 8 章 , 我 们 告别 了 单调 乏味 的 表单 制作 体验 , 享受 着 使 用 HTMLS 标签 来 处 理 表 
单 验证 和 创建 表单 元 素 的 民 意 。 值 得 称道 的 是 ， 我 们 还 有 条 件 地 为 一 些 老 版 本 浏览 需 如 
IE6, 7 fü 8 fifi A. T. JavaScript 备用 方案 以 提升 用 户 体验 。 

从 本 书 的 开头 到 现在 ， 我 们 用 HTMLS 和 CSS3 完成 了 一 个 名 为 And The Winner Isn't.... 
的 响应 式 网 站 。 你 可 以 通过 http:/www.andthewinnerisnt.com 访问 该 网 站 。 


下 图 展示 了 网 站 首页 在 iPhone 上 的 显示 效果 : 


















































~ 


Carrier 全 


VIDEOS/CLIPS 








WHEN | WATCH THE 
» OSCARS I'M ANNOYED... 
) k g Kong. Mo 


Y 


THESE SHOULD HAVE WON 六 | 


y EVERY YEAR 
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在 iPad 上 的 显示 效果 : 








AND THE WINNER IS 


WHY? OFFLINE REDEMPTION —— VIDEOS/CLIPS QUOTES QUIZ 


1, EVERY YEAR 


WHEN | WATCH THE OSCARS 
Nn I'M ANNOYED... 
V 


, 


i 


THESE SHOULD HAVE WON » 


UNSUNG HEROES... 


ROBERT DE NIRO CHARLES GRODIN 








AND THE WINNER IS 


WHY? OFFLINE REDEMPTION VIDEOS/CLIPS QUOTES QUIZ 

UNSUNG HEROES... j EVERY YEAR 
S cg 

A d € WHEN | WATCH THE 

- OSCARS I'M 





ANNOYED... 
King Kong, Moulin 
b Rouge Munich 
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在 现代 桌面 版 浏览 器 (Google Chrome v16 ) 中 的 显示 效果 : 








AND THE WINNER IS 
WHY? OFFUNE REDEMPTION Woeos/CuPs QUOTES QUIZ 


EVERY YEAR 


WHEN | WATCH THE 

OSCARS I'M ANNOYED... 

that films like King Kong, Moulin Rouge 

3nd Munich get the statue whilst the real 
matic heroes t Not very 


UNSUNG HEROES... 








t things right 


NOTE- OUR OPNIOA IS ABSOLUTELY CORRECT. YOU ARE WRONG, EVEN F YOU THINK YOU AAE RIGHT. TIRATS A FACT. DEAL WITH IT 























以 及 在 Internet Explorer 8 中 的 效果 


Me tere 


AND THE WINNER IS 


Off 
Redemption 
Videos cips 


Quotes 
pm 
RoRERT DENIRO CHARLES GRODIN 


EVERY YEAR 


WHEN | WATCH THE OSCARS I'M 
ANNOYED... 


ke King Kong. Moulin Rouge Munich 














我 的 妈 呀 ! 给 
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9.1 


现状 


Internet Explorer 8 中 的 效果 惨不忍睹 ， 因 为 它 不 支持 <aside>、<header>、<nav> 和 
<f oot er > 等 HTML5 元 素 ， 这 自然 就 引入 了 本 章 的 主题 一 解决 跨 浏览 吉 问 题 。 


渐进 增强 与 优雅 降级 


你 可 能 听 过 “渐进 增强 ”和 “优雅 降级 ”这 两 个 词 。 它 们 是 处 理 多 浏览 器 支持 的 两 种 方 
法 论 ， 并 在 Web 社区 中 引发 过 激烈 的 辩论 。 虽 然 最 初 它们 看 起 来 是 两 个 可 互 换 的 概念 ， 
但 本 质 上 则 完全 相反 。 下 面 是 我 的 理解 。 

优雅 降级 指 的 是 为 现代 浏览 器 制作 网 站 ， 然 后 保证 为 某 些 老 版 本 浏览 器 提供 基本 可 用 的 
体验 。 新 特性 在 老 版 本 浏览 器 中 会 降级 ， 且 一 般 会 有 一 个 分 界 点 ， 声 明 不 文 持 那 些 老 掉 
牙 的 浏览 器 。 有 些 时 候 用 户 也 仅 会 被 警告 他 们 所 使 用 的 浏览 器 有 问题 ， 建 议 其 更 换 ( 如 
“您 的 浏览 器 老 得 让 人 笑话 一 一 建议 下 载 最 新 版 浏览 器 !”) 

渐进 增强 与 优雅 降级 恰好 相反 。 浙 进 增强 以 恪守 Web 标准 的 标签 为 基础 ， 意 味 着 它 在 所 
有 浏览 需 中 均 可 用 。 然 后 通过 CSS 样式 和 必要 的 JavaScript 来 为 更 先进 的 浏览 需 提 供 渐 
进 式 的 增强 体验 。 

讨论 过 这 两 种 方法 优 劣 的 文章 数 以 百 计 。 我 们 先 来 看 看 来 自 Opera 开发 者 社区 的 这 篇 : 


http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/， 以 及 来 自 





























Aaron Gustafson 的 经 典 之 作 : http://www.alistapart.com/articles/understandingprogressiveen 


hancement。 





目前 ， 渐 进 增强 被 普遍 认为 是 开发 网 站 的 最 佳 实 践 。 然 而 ， 冰 冷 的 现实 是 ， 我 虽然 打 心 
眼 里 喜欢 渐进 增强 并 用 它 来 制作 网 站 ， 但 很 多 情况 下 可 以 说 我 是 用 优雅 降级 的 方式 来 做 
的 。 怎 么 会 这 样 呢 ? 
www.andthewinnerisnt.com 这 个 网 站 是 使 用 HTMLS 制作 的 。 耻 6、7、8 是 在 HTMLS 之 前 
就 已 被 开发 和 发 布 出 来 了 (你 应 该 知道 ，HTML5 虽然 日 益 普 及 ， 但 它 还 不 是 一 个 被 正式 
批准 的 标准 )， 所 以 无 法 识别 <asi de > 、<section> 和 <footer> 这 样 的 标签 。 因 此 ， 从 
纯粹 意义 上 讲 我 不 应 该 使 用 HTMLS 元 素 。 追 加 一 段 JavaScript 来 解决 这 个 功能 问题 一 一 
这 就 是 真正 的 渐进 增强 吗 ? 

尽管 如 此 ， 除 非 有 什么 让 我 信服 的 理由 ， 和 否则 我 都 一 直选 用 HIML5 来 蔡 代 HTML 4.01。 
现实 是 ， 根 据 我 的 日 常 工 作 经 验 ，HTML5 利 大 于 弊 。 在 使 用 HIML5 时 ， 一 定 要 编写 与 
标准 兼容 的 HTML 代码 ( 可 以 使 用 HTMLS 验证 工具 来 排除 代码 错误 ， 地址 是 : 
http://validator.nu/ 或 http://validator.w3.org/ )， 好 让 所 有 设备 都 能 以 原生 方式 完美 演 染 。 
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9.2 


9.2.1 


9.2.2 


无 论 如 何 ， 有 时 你 肯定 会 选择 REWER ) 去 实现 一 些 现代 浏览 器 提供 的 增强 功能 ， 
可 能 是 为 了 那些 老 弱 的 正 。 比 如 你 想 让 它 能 支持 圆 角 ， 不 过 在 你 这 么 做 之 前 ， 请 再 听 我 
IPTE J L^n] EErEE 








该 不 该 修复 老 版 本 IE 


我 想 再 次 重申 以 前 的 观点 : 通过 打 补 丁 的 方式 可 以 为 老 版 本 浏览 器 增加 大 多 数 HTML5 
和 CSS3 特性 ,但 导致 的 结果 是 用 户 体验 将 严重 依赖 JavaScript， 且 可 用 性 相 较 于 不 使 用 
补丁 有 所 减弱 。 毫 无 疑问 ， 影 响 这 个 抉择 最 关键 的 因素 是 性 能 。 因 为 我 只 是 告诉 你 能 这 
么 做 ， 并 不 代表 你 应 该 这 么 做 ! 

此 外 ， 即 使 不 使 用 补丁 (我 们 稍 后 会 谈 谈 这 个 话题 )， 以 我 的 经 验 ， 为 了 能 让 IE6 和 IE7 
(以 及 少量 IE8 和 IE9 ) 的 页 面 泻 染 效果 尽 可 能 与 现代 标准 浏览 器 类 似 ， 开 发 、 测 试 和 配 
置 专 属 CSS 代码 所 花费 的 时 间 ， 至 少 也 和 为 现代 浏览 器 提供 渐进 增强 所 花费 的 时 间 一 样 
多 一 一 这 很 让 人 不 吏 ! 你 和 你 的 客户 就 准备 这 样 用 掉 开发 时 间 ? 















































统计 数据 (再 看 看 世界 的 变化 ) 


我 们 来 重 温 一 下 第 1 章 说 过 的 话题 。 我们 注意 到 从 2010 年 7 月 到 2011 年 7 月 , 全 球 移动 
浏览 器 的 使 用 率 ( 数据 来 自 Global Stats 网 站 http://gs.statcounter.com ) 不 断 上 升 , 从 2.8696 
涨 至 7.02%， 而 IE7 的 使 用 率 则 继续 下 跌 , 低 至 5.45%. 2011 年 最 后 一 个 月 的 统计 数据 则 
更 加 令 人 警醒: TE 的 使 用 率 只 剩 了 4%, IE6 的 使 用 率 仅 有 1.78%。 而 与 此 同时 移动 浏览 
器 的 使 用 率 则 增长 至 8.04%。 


另 一 个 更 加 有 趣 的 现象 是 截止 2011 年 12 月 ，Google Chrome (包括 v15 和 v16 ) 仅 凭 一 
己 之 力 就 占据 了 全 球 浏览 器 市 场 的 25.7%， 几 乎 与 正 6、7、8 的 总 和 (27.9%) 持平 。 再 
加 上 其 他 现代 浏览 器 的 份额 ， 如 Safari ( 4.3% ， 不 包括 iOS 版 ) 和 所 有 版 本 的 Firefox 
(21.01% ) 以 及 各 种 移动 浏览 器 ， 就 不 难 发 现 为 现代 浏览 器 开发 增强 的 用 户 体验 , 远 比 为 
那些 老 不 死 的 玩意 修补 漏洞 更 有 意义 。 至 少 对 我 来 说 是 这 样 的 ! 

结论 就 是 : 老 弱 的 下 (6、7、8 ) 的 使 用 率 正在 不 断 减少 ， 而 现代 浏览 器 (包括 桌面 版 和 
移动 版 ) 的 使 用 率 则 正在 不 断 增 加 。 














个 人 选择 


目前 我 个 人 的 态度 是 ， 针 对 全 新 制作 的 网 站 ， 要 确保 其 在 最 新 版 本 的 正 ( 编写 本 书 时 最 
新 版 本 是 IE9 ) 以 及 前 一 个 版 本 CIES ) 中 效果 完美 。 而 针对 老 版 本 TE 的 布局 和 样式 调整 
则 由 于 需要 额外 的 时 间 ， 所 以 另行 商议 。 
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9.3 





这 样 做 并 不 表示 我 完全 不 管 IE7 等 老 版 本 浏览 器 的 基本 可 用 性 

















问题 。 我 只 是 将 有 限 的 开 


发 时 间 用 于 保证 基本 布局 和 功能 正常 ， 所 以 会 忽略 一 些微 小 的 对 齐 问题 ， 以 及 一 些 由 于 
浏览 需 不 支持 背景 渐变 、 圆 角 、 盒 阴影 新 特性 而 导致 的 视觉 差异 问题 。 这 些 东 西 不 影响 











可 用 性 ， 多 半 都 属于 渐进 增强 的 效果 ， 我 也 没 期 望 在 老 弱 浏览 
在 多 个 浏览 器 中 测试 网 站 





如 上 看 到 什么 效果 。 


通常 ,标准 浏览 器 如 Chrome, Safari, Firefox 在 泻 染 使 用 HTML5 和 CSS3 
制作 的 网 页 时 ， 效 果 基本 一 致 。 目 前 ， 大 多 数 智能 手机 使 用 的 也 是 和 桌面 
版 Safari, Chrome 一 样 的 Webkit 内 核 ， 所 以 其 泻 染 效果 也 满足 你 的 期 望 。 
但 是 ， 不 同 版 本 的 IE 泻 染 效果 差别 较 大 ， 所 以 毫 无 疑问 你 需要 在 各 版 本 





Q 的 IE 中 测试 一 下 网 站 效果 (除非 你 默认 就 使 用 正 浏 览 器 哎哟 ， 我 得 


向 老 同 志 表 示 一 下 慰问 )。 我 通常 都 使 用 IE Tester ( http//www.my- 
debugbar.com/wiki/IETester/HomePage ) 这 个 免费 的 工具 , 利用 它 可 以 在 一 
台 机 器 上 同时 运行 多 个 版 本 的 IE。 不 过 还 有 很 多 类 似 的 替代 软件 ， 


Smashing Magazine 上 的 这 篇 文章 对 这 类 工具 做 


了 一 个 很 好 的 总 结 : 


http:/www.mashingmagazine.com/2011/08/07/a-dozen-cross-browser-testing- 


tools/。 


为 了 说 明 这 种 方法 ， 在 看 完 http//www.andthewinnerisnt.com 网 站 在 IES 中 的 效果 之 后 ， 

很 明显 我 们 得 做 点 什么 ， 好 让 网 站 基本 正常 。 我 们 准备 使 用 一 个 名 为 Modernizr 的 
JavaScript 工具 和 一 个 补丁 来 修补 老 版 本 IE 的 缺陷 。 我 不 太 确定 IE 是 否 值得 这 么 做 ， 
为 毕 竞 问题 是 因 它 而 起 的 ,但 谁 让 我 心肠 软 呢 。 在 我 们 开始 之 前 ， 先 来 了 解 一 下 

















Modernizr。 


前 端的 瑞士 军刀 : Modernizr 

















在 线 社区 总 能 发 现 各 种 浏览 吉 的 兼容 性 问题 ， 并 不 断 为 我 等 凡人 贡献 解决 方案 ， 这 一 点 
让 我 既 赞 叹 又 着 迷 。 我 们 在 第 4 章 简要 介绍 过 Modernizr， 到 了 最 后 一 章 又 一 次 讲 到 它 。 











Modernizr 是 一 个 用 于 检测 浏览 器 功能 的 开源 JavaScript 库 。Modernizr 的 第 一 版 由 Fauk Ate? 





开发 , 目前 由 Alex Sexton 和 才华 横 溢 的 Paul Irish 担当 首席 开发 人 员 。 一 些 知名 的 公司 已 








经 开始 使 用 这 个 工具 ， 包 括 Twitter 、 微 软 和 谷歌 。 我 说 这 些 不 只 是 为 了 吹捧 Modernizr 





























的 开发 团队 ( 他们 确实 值得 吹捧 ), 更 重要 的 是 想 说 明 Modernizr 是 JavaScript 杰作 , 绝 不 
会 县 花 一 现 。 坦 率 地 说 ， 它 是 一 个 值得 深入 理解 和 学 习 的 工具 。 








那 它 到 底 做 了 什么 ?” 既 能 给 老 版 本 浏览 器 打 补 丁 ， 又 能 保证 新 浏览 器 渐进 增强 的 用 户 体 





验 ， 它 是 怎么 做 到 的 ， 而 我 们 又 如 何 使 其 听任 差 遗 呢 ? 好 好 听 





着 ……: 
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从 实际 操作 来 看 , Modernizr 默认 做 的 事 很 少 ,除了 (在 你 选择 的 情况 下 ) 给 不 支持 HTMLS 
标签 的 浏览 器 如 IE6、7、8 追加 一 点 由 Remy Sharp 开发 的 HTML5 热 片 脚本 ,使 其 可 以 
识别 <asi de >、<s ecti0n> 等 HTML5 元 素 之 外 ， 它 主要 做 的 就 是 浏览 器 “功能 检测 ”。 
因此 , 它 知道 浏览 需 是 否 支 持 各 种 HTMLS 和 CSS3 特性 。 这 就 为 我 们 根据 浏览 器 特性 采 
取 不 同行 动 提 供 了 依据 ， 剩 下 的 事情 就 是 我 们 如 何 具体 实施 了 。 所 以 ， 我 们 来 给 页 面 加 
A Modernizr 来 试 试 效果 。 

第 一 步 ， 下载 Modernizr ( http://www.modernizr.com )。 


如 何 选 择 Modernizr 版 本 一 一 开发 版 还 是 生产 版 ? 

a 如 果 你 对 Modernizr 的 运行 原理 感 兴 趣 ， 那 就 下 载 开 发 版 ， 因 为 每 一 个 选 
项 和 功能 测试 都 有 相应 文档 。 不 过 ,开发 版 可 以 让 你 只 选择 仅 和 你 的 网 站 
或 Web 应 用 相关 的 功能 检测 ， 这 样 可 以 保证 文件 既 小 巧 又 有 的 放 和 拓 。 














Download Modernizr 2 Follow us on Twittor 
Contribute on github 
Subscribe with RSS. 


Donate to Modemizr 


Latest news 





mir: 
CDN and production. 


PREVIOUS 


[] 
o 
© 
[] 
[] 
© 
© 
© 
© 
© 
© 
b 





Beeee 


Community add-ons 


» GENERATE! 

















接 下 来 ， 将 文件 保存 在 某 个 适当 位 置 ( 和 之 前 一 样 ， 我 保存 在 根 目录 下 的 js 文件 夹 中 )， 
然后 在 页 面 的 <head> 中 调用 : 


<head> 

«meta charsetzutf-8» 

«meta namez'viewport" contentz'widthzdevice-width,initial-scalezl. 0, maxi mum- 
scale=1" /> 

«title»And the winner isn't.«[title» 
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9.3.1 


«link hrefz'css/main.css" rel="stylesheet" /> 
«script srcz'js/modernizr.js"»«[scri pt» 
«[ head» 


使 用 了 Modernizr 之 后 ， 再 通过 Firebug 或 类 似 开 发 工具 查看 页 面 源 代 码 时 ， 就 会 看 到 
HTML 标签 上 追加 了 一 堆 不 同 的 类 名 。 在 Firefox v9.01 中 查看 的 示例 效果 如 下 : 


«html classz'js flexbox geolocation postmessage indexeddb history websockets rgba 
hsla multiplebgs backgroundsize borderi mage borderradius boxshadow textshadow 
opacity cssani mations csscolumns cssgradients no-cssreflections csstransforms 
no-csstransforms3d csstransitions fontface generatedcontent video audio 
localstorage sessionstorage applicationcache" langz'en'» 


KAGER. AEA KIRARA Vas, ref pc pU TARERE, Hinzu 
览 需 支 持 哪 些 ， 不 支持 哪些 〈 对 不 支持 的 特性 ， 对 应 的 类 名 前 有 no- 前缀 )。 基 于 此 我 们 
就 可 以 做 两 件 事 : 在 CSS 文件 中 逐个 特性 地 修正 样式 ， 以 及 按 需 加 载 额外 的 CSS 或 JS 
文件 。 


使 用 Modernizr 辅 助 修正 样式 问题 


And the winner isn’t... 网 站 非常 适合 使 用 Modernizr 来 辅助 修正 一 个 样式 问题 。 我 们 的 问 
答 页 面 在 支持 3D 变形 的 浏览 器 中 效果 正常 , 在 不 支持 该 特性 的 浏览 器 中 则 仅 做 了 一 个 简 
FREAR 现在 , 无 论 浏览 器 是 否 支 持 3D 变形 , 我 们 在 页 面 上 都 有 一 段 备注 告知 用 

P: 该 页 面 效 果 需 要 3D 变形 的 支持 。 如 果 你 没 看 到 海报 图 片 的 3D 翻转 效果 , 试 试 Safari 
或 Chrome。 


有 了 Modemizr 追加 的 额外 类 名 ， 就 有 办 法 仪 在 不 支持 3D 变形 特性 的 浏览 带 中 显示 备注 
F BEI 


.note ( 
display: none; 

} 

.No-csstransf orms3d .note { 
display: block; 





























} 
分 析 一 下 ， 首 先 将 备注 设置 为 默认 不 显示 : 
.note ( 
display: none; 
} 


这 意味 着 支持 3D 变形 特性 的 浏览 器 ( 如 Google Chrome 16 ) 就 不 会 看 到 备注 信息 (如 下 
): 
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AND THE WINNER IS 
WHY? OFFLINE REDEMPTION VIDEDS/CUIPS QUOTES wz 


FORGET WHAT THE CRITICS SAY, USE THE FORCE AND DECIDE WHICH OF THESE FILMS YOU 
THINK IS HOT AND WHICH IS NOT... 


X THE HOT OR NOT QUIZ 





DVERHYPED arai 





NOTE: OUR OPINION 15 ABSOLUTELY CORRECT. YOU ARE WRONG, EVEN IF YOU THINK YOU ARE RIGHT. THAT'S A FACT. DEAL WITA I. 


AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 











接 下 来 的 规则 使 用 了 Modernizr 追加 的 额外 类 名 来 为 不 支持 3D 变形 的 浏览 器 显示 备注 : 


.No-csstransforms3d .note ( 
display: block; 
} 


下 图 显示 了 同一 页 面 在 Firefox 9 中 的 效果 : 











AND THE WINNER IS 


WHY? OFFUNE REDEMPTION VIDEOS/CUPS QUOTES Quz 


seem THE HOT OR NOT QUIZ 


RC KENIA: USE THE FORCE ANO DECIDE WHICH OF THESE FILMS YOU THINK IS HOT 
IS NOT... 





NITE TUR PIN ANNAL ETTLY CORRECT YT AAE WRONG. (VEN IU TNI YON AAE IT. Tu A wm 








人 AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
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Modernizr 让 我 们 抛弃 浏览 器 的 角度 ， 转 而 从 功能 特性 的 角度 考虑 问题 。 


9.3.2 ”使 用 Modernizri 上 老 版 本 IE 支 持 HTML5 元 素 


我 选择 了 一 个 含有 HTMLS 热 片 脚本 的 Modernizr 自 定义 生产 版 ,然后 在 TES 中 刷新 页 面 ， 





可 以 看 到 页 面 效 果 比 之 前 好 太 多 了 : 








http://andthewinnerisnt.com/ 


AND THE WINNER IS 


WHY? OFFLINE REDEMPTION VIDEOS/CLIPS QUOTES QUIZ 


t EVERY YEAR 


WHEN | WATCH THE 
OSCARS I'M ANNOYED... 
M that films like King Kong, Moulin Rouge 
li and Munich get the statue whilst the real 


1 
| sta S 
K cinematic heroes lose out. Not very 








V A Hollywood is it? 
QVERHYPED AL We're here to put things right 
NONSENSE... 1 
Bat THESE SHOULD HAVE WON »» 




















我 不 用 再 做 什么 。 因 为 Modernizr 使 老 版 本 IE 可 以 识别 HTMLS 的 结构 化 元 素 ， 所 以 之 





前 的 很 多 标准 CSS 样式 现在 都 可 以 识别 了 ， 页 面 呈 现 出 了 它 应 有 的 样子 。 


对 于 我 这 个 自由 职业 者 的 钱包 来 说 ， 这 是 天 大 的 好 事 。 如 果 你 之 前 没有 在 现代 浏览 锅 中 
看 过 这 个 网 站 的 效果 , 你 应 该 都 不 知道 两 者 有 什么 区 别 。 不 过 , 由 于 IE8 缺少 CSS3 文 持 ， 
所 以 相对 于 现代 浏览 絮 来 说 有 一 些 明显 的 视觉 效果 上 的 缺陷 。 导 航 链接 上 没有 交替 颜色 
( 如 果 需 要 ， 我 们 可 以 通过 给 奇数 导航 链接 追加 额外 类 名 来 解决 这 个 问题 )， 按 钮 没有 图 
角 , 没有 文字 阴影 和 盒 阴 影 。 最 重要 的 一 点 是 , 虽然 我 们 的 流 式 布局 很 灵活 , 但 缺少 CSS3 
意味 着 不 支持 媒体 查询 。 没 有 媒体 查询 , 在 了 6、7、8 中 就 不 会 有 不 同 视 口中 精心 设计 








的 布局 变化 。 


虽然 我 怎么 都 不 认为 IE8 中 这 样 的 布局 “ 毁 ” 了 设计 效果 ， 但 只 要 你 愿意 ，Modernizr 也 
可 以 帮 你 修补 老 版 本 浏览 器 ,为 了 证 明 这 一 点 ,我 们 来 给 全 6、7、8 追 加 mi n/ max- wi dt h 





媒体 查询 支持 ， 从 而 使 网 页 在 这 些 浏 览 器 的 不 同 视 口中 也 能 正确 响应 。 
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9.3.3 给 IE6、7、8 追加 min/max 媒 体 查询 功能 


我 选择 的 给 老 版 本 TE. 添加 媒体 查询 支持 的 垫 片 脚本 ， 仅 支持 追加 mi n] max- wi dth 媒体 
查询 功能 。 还 有 很 多 类 似 的 垫 片 脚本 ， 可 以 追加 很 多 媒体 查询 特性 。 但 对 于 响应 式 设计 
来 说 ，Scott Jehl 开发 的 Respond.js 使 用 简单 、 速 度 快 ， 我 一 直 用 得 很 顺手 。 


Respond.js ( https;//github.com/scottjehl/Respond ) 可 以 独立 于 Modernizr 使 用 
其 引入 到 需要 的 页 面 ， 然 后 就 如 其 作者 Scott Jehl Mii: “FIE, THR” 


在 将 Respond.js 整合 到 Modernizr 之 前 ,我 们 先 来 单独 使 用 一 下 。 将 Respond.js 直接 丢 到 
页 面 上 C 即将 其 插入 到 Modernizr 文件 之 后 ), 然后 检查 看 看 它 对 下 做 了 哪些 处 理 。 具 体 
做 法 是 将 Respond.js 保存 到 某 个 适当 的 路 径 ， 然 后 在 <head> 中 引用 : 


<head> 

«meta Charset=utf-8> 

«meta namez'viewport" content="width=device-width,initial-scale=1. 0, maxi mum- 
scale=1" /> 

«title»And the winner isn't.«/title» 

«link hrefz'css/main.css" rel="stylesheet" /> 

«script srce"js/[modernizr.js"»«[scri pt» 

«script srcz'js/respond.min.js"»«/scri pt» 

«| head» 


现在 ， 只 要 在 IE8 中 加 载 页 面 并 调整 浏览 需 窗 口 ， 就 会 看 到 我 们 的 响应 设计 效果 又 回来 
了 (如 下 图 所 示 ): 





























http://andthewinnerisn! t.com/ - 


VIDEOS/GLIPS 
QUOTES 
QUIZ 


à; EVERY YEAR 


WHEN | WATCH THE 
OSCARS I'M ANNOYED.. 


ms like iiis n Moulin aora i Múnich 





THESE SHOULD HAVE WON » 
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9.3.4 





不 错 ， 我们 现在 给 焉 添加 了 热 片 脚本 ,使 其 可 以 支持 min- wi dth 和 max-width， 但 有 
一 个 问题 : 热 片 脚本 在 每 一 种 浏览 器 中 都 会 被 加 载 一 一 不 论 它们 需要 与 否 。 一 种 解决 办 
法 就 是 将 脚本 文件 链接 放置 在 下 条 件 注释 中 ,， 像 下 面 这 样 : 
<!--[if Ite IE 8]> 

«script srce'js[respond.min.js"/»«[script» 
«l[endif]--» 
你 以 前 肯定 见 过 条 件 注 释 。 这 是 一 种 非常 简便 的 方法 ， 可 用 来 为 相应 版 本 的 IE Jii CSS 
或 了 本文 件 ( 甚 至 是 内 容 )。 其 他 浏览 器 会 将 这 些 代码 看 做 注释 而 直接 忽略 。 
ERAP, 我们 的 条 件 注释 是 说 :“ 如 果 你 的 浏览 絮 版 本 低 于 或 等 于 (1te ) IE8， 就 执行 
其 中 的 代码 。” 


详细 了 解 条 件 注释 

相 较 于 功能 检测 来 说 , 条 件 注释 并 不 太 受 欢迎 , 但 如 果 你 想 了 解 更 多 有 关 
条 件 注释 的 知识 , 请 参阅 如 下 网 址 : http://msdn.microsoft.com/en-us/library/ 
ms5375129628v-vs.859629.aspx 

















这 样 问题 就 解决 了 。 但 我 们 真 要 使 用 TE 特有 的 条 件 注释 来 污染 我 们 的 标签 代码 吗 ? HRE 
对 其 他 浏览 需 的 热 片 脚本 又 该 怎么 办 呢 ? 还 是 得 用 Modernizr 呀 。 





使 用 Modernizr 按 需 加 载 资 源 


Modernizr 在 保证 网 站 或 Web 应 用 的 代码 精简 方面 有 一 个 极 大 的 优势 , 就 是 它 能 按 需 加 载 
资源 (CSS 和 JS 文件 )。 其 实 我 们 只 需要 加 载 用 户 真正 需要 的 资源 ， 而 不 是 采用 “ 贪 大 
求全 ”的 策略 〈 不 管 他 们 是 不 是 真正 需要 就 ) 加 载 每 一 个 用 户 可 能 用 到 的 资源 。 这 样 就 
可 以 保证 对 每 一 个 用 户 ， 我 们 的 页 面 都 足够 简洁 ， 加 载 足够 快速 。 

之 前 Modernizr 已 经 被 追加 到 了 页 面 头 部 ， 接 下 来 我 们 来 为 那些 不 支持 CSS3 媒体 查询 的 
浏览 圳 (如 下 6、7、8 ) 加 载 Respond.js 文件 。 

Modernizr 中 包含 一 个 名 为 YepNope.js 的 小 型 JavaScript 库 文 件 (http:/yepnopejs.comy )。 
使 用 方法 很 简单 : 

Modernizr.load(( 


test: Modernizr.mg('only all'), 
nope: 'js[respond.min.js' 
































首先 调用 Modernizr 的 资源 加 载 方法 : 


Modernizr.load(( 


加 载 方 法 中 包含 功能 检测 ， 以 及 根据 检测 结果 将 要 采取 的 一 系列 动作 。 在 本 例 中 ， 我 们 
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检测 的 是 浏览 器 是 否 支 持 媒体 查询 : 
test: Modernizr.mq('only all') 
如 果 不 支 持 ， 则 会 加 载 respond. min.js 这 个 文件 : 
nope: 'js/respond.min.js' 
此 处 的 only all 表示 “你 能 识别 媒体 查询 吗 ? ”， 老 版 本 IE 的 检测 结果 肯定 是 不 支持 ， 
所 以 对 应 nope 中 的 动作 ， 即 加 载 相 应 的 资源 文件 。 这 样 就 可 以 让 respond,.min.js 仅 
在 需要 的 时 候 加 载 。 
还 可 以 一 次 加 载 多 个 文件 : 


Modernizr.load(( 
test: Modernizr.mq('only all') 
nope: ['js/respond.min.js', 'css[extra.css'] 


F) 


上 面 的 代码 中 使 用 了 一 个 数组 来 同时 加 载 respond. min.js 和 一 个 名 为 extra.css 的 
CSS 文件 。 这 种 方法 可 以 让 你 根据 实际 的 需要 来 加 载 独立 的 样式 。 还 有 一 点 值得 一 提 ， 
即 还 可 以 根据 不 同 的 检测 结果 来 加 载 不 同 的 资源 文件 : 


Modernizr.load(( 
test: Modernizr.mq('only all') 








yep: 'jslpass.js', 
nope: ['js/respond.min.js', 'fail-polyfill.js', 'fail.css'] 
both: 'js/for-all.js' 


}) 


上 面 的 代码 在 检测 通过 时 加 载 一 个 文件 ， 检 测 失败 时 加 载 三 个 文件 ， 最 后 无 论 检 测 结 
如 何 ， 都 加 载 一 个 名 为 for- al1 .js 的 文件 。 


按 需 加 载 资源 的 代码 可 以 单独 写 在 一 个 JavaScript 文件 里 。 本 例 中 我 将 其 命名 为 
conditional.js, 并 将 其 与 mdernizr.,js 和 respond. min. js 一 起 放 在 js 文件 夹 。 
这 样 整理 之 后 ，<head> 部 分 看 起 来 就 是 下 面 这 个 样子 : 


<head> 

«meta charset=utf-8> 

«meta name="viewport" content="width=device-width,initial- 
scalez1.0, maxi mum-scalez1" /> 

«title»And the winner isn't.«/title» 

«link hrefz'css/main.css" rel="stylesheet" /> 

«script srce"js[modernizr.js"»«[scri pt» 

«script srcz"js/conditional.js"»«/scri pt» 

«[ head» 


注意 我 已 经 移 除 了 respond. m n. js ， 因 为 现在 该 文件 可 以 根据 需要 自动 加 载 。 








有 关 使 用 Modernizr 按 需 加 载 资源 的 更 详细 文档 , 请 见 此 处 : http//www. 
modernizr.com/docs/fload 。 
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NI 


下 载 垫 片 脚 本 


下 面 的 这 个 github 库 中 有 很 多 有 用 的 热 片 脚本 : https://github.com/Modernizr/ 
Modernizr/wiki/HTML5-Cross-browser-Polyfills 。 


9.4 ”必要 时 将 导航 链接 转换 为 下 拉 菜 单 


在 小 视 口 
的 屏幕 空 








屏幕 中 ， 响 应 式 设计 普遍 存在 一 个 问题 ， 即 页 面 上 一 大 堆 导 航 链接 会 占据 宝贵 
Sp 











例如 ，And the winnerisnt... 网 站 只 有 6 个 导航 链接 ， 目 前 页 面 在 小 视 口中 的 效果 如 下 所 示 : 


我 想 在 浏 

















本 。 为 了 


编写 一 段 代 码 来 做 这 件 事 。 可 敬 的 Chris Coyier 写 过 一 篇 文章 来 讲 怎 么 做 
( http://css-tricks.com/convert-menu-to-dropdown/ )。 不过, 你 还 可 以 选择 别人 已 经 写 好 的 脚 





5:00 PM = 
ledemption: And the winner isn't... 





AND THE WINNER IS 


WHY? 
OFFLINE 
REDEMPTION 
VIDEOS/CLIPS 
QUOTES 

















览 需 视 口 小 于 一 定 宽 度 时 ， 将 这 些 导 航 链接 转换 为 一 个 下 拉 沫 单 。 你 可 以 自己 








简便 起 见 ， 我 就 选 了 个 现成 的 脚本 。 下 图 显示 了 在 小 视 口 中 将 导航 链接 转换 为 


下 拉 菜 单 后 的 效果 : 
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AND THE WINNER IS 


WHY? 


OFFLINE 
REDEMPTION 
VIDEOS/CLIPS 
QUOTES 














点 击 “Select a page” 按 钮 就 会 显示 出 导航 ， 效 果 如 下 : 





5:09 PM 





AND THE WINNER IS 


Select a page 


EVERY 


TE 


v Select a page 
Why? 
Offline 











b S 
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这 就 是 渐进 增强 的 


典型 代表 一 一 它 不 是 一 个 必需 的 功能 ， 但 为 使 用 小 屏幕 设备 的 用 户 提 


供 了 更 多 的 第 一 屏 内 容 。 那 我 们 来 继续 看 看 如 何 实现 它 。 首先 下 载 Responsive Menu 脚本 
( https://github.com/mattkersley/Responsive-Menu )， 和 以 前 一 样 将 其 (j query. mobi lemenu.j s ) 
存放 在 js 文件 夹 。 接 下 来 再 给 每 个 页 面 的 导航 链接 部 分 设置 一 个 id : 


«nav role="navi 


«ul id="main 
<li><a hre 
<li><a hre 
<li><a hre 
<li><a hre 
<li><a hre 
<li><a hre 

</ul> 

«[ nav» 


Nav" 





gati 


on'» 
> 
hy. html ">Why?</a></li > 

fline. htm ">Offline</a></li> 
edemption.html ">Redemption</a></li> 
deo. html ">Vi deos/clips</a></li > 
uotes. html ">Quotes</a></li> 

Dquiz. html "»Quiz«/a»«[li» 





不 做 上 面 这 一 步 也 行 ,但 jQuery 选择 器 搭配 特定 id 速度 比较 快 。 
接 下 来 , 在 conditional ,js 文件 中 追加 如 下 代码 : 


Modernizr.load 


{ 


(I 


test: Modernizr.mq('only all') 
nope: 'js/respond.min.js' 


|] 如 果 max- wi dth 等 于 600px， 则 加 载 菜单 转换 脚本 
test: Modernizr.mq('only screen and (max-width: 600px)') 
yep : ['js/jquery-1.7.1.js', 'jslíjquery.mobilemenu.js'], 


complete : 


11 资源 完 


fun 


全 加 载 后 运行 


ction () { 


$(document).ready(function()( 


$('£mai nNav'). mobi leMenu( (1 





switchWidth: 600, |] 转换 宽度 ( 用 px 表示 ) 
topOptionText: 'Select a page', 1 1 第 一 个 选项 的 内 容 


indentString: '&nbsp;&nbsp; &nbsp;' /| 缩 进 谋 套 选项 的 字符 囊 





在 为 老 版 本 正 按 需 加 载 Respond. js 之 后 ,我 们 增加 了 另 一 个 检测 : 


test: Modernizr.mq('only screen and (max-width: 600px)'), 





















































这 个 检测 是 问 浏 览 器 视 口 是 和 否 能 识别 媒体 查询 , 如 果 可 以 , 那 视 口 的 最 大 宽度 是 否 是 600 








像素 ”如 果 是 ， 则 : 
yep : ['js/jquery-1.7.1.js', 'jsljquery.mobilemenu.js'] 
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上 面 这 行 代码 同时 加 载 了 jQuery 库 文件 和 Responsive Menu 文件 ， 
complete : function () ( 
essais 其 他 代码 :……: 
complete 这 块 代码 意思 是 ,一旦 文件 下 载 并 执行 之 后 ， 运 行 如 下 代码 : 
$(document).ready(function()( 
$(' mai nNav'). mobil eMenu(( 

switchWidth: 600, || 转换 宽度 (Mpx 表示 ) 

topOptionText: 'Select a page', 1 1 第 一 个 选项 的 内 容 

indentString: '&nbsp; &nbsp; &nbsp;' /|/ 缩 进 嵌 套 选项 的 字符 囊 

]); 
]); 
这 里 有 几 个 针对 Responsive Menu 的 配置 参数 。 最 重要 的 第 一 个 参数 , 定义 了 在 视 口 多 宽 
的 情况 下 ， 将 导航 链接 转换 为 下 拉 菜 单 〈 此 处 我 设置 为 600px )。 
此 处 我 们 使 用 Modernizr 又 一 次 保证 了 不 需要 该 效果 的 用 户 不 会 加 载 多 余 代码 , 而 需要 的 
用 户 则 会 享受 到 这 种 渐进 增强 体验 。 
对 于 网 页 设计 师 ， 尤 其 是 那些 不 熟悉 JavaScript 代码 的 人 来 说 ， 一 看 到 Modernizr 就 会 心 
ÆR, Modernizr 当然 值得 深入 挖掘 ， 但 这 个 简单 的 教程 已 经 足够 说 明 Modernizr 的 用 
处 了 ， 它 在 你 将 来 的 响应 式 项 目 中 一 定 会 大 显 身手 。 
9.5 “高 分 辨 率 设备 〈 未 来 趋势 ) 





设备 及 其 性 能 总 是 与 时 俱 进 。 事 实 上 ， 我 们 不 仅仅 要 面 对 不 同 的 视 口 尺寸 ， 还 得 考虑 高 
4] BER WR BÉ , iPhone 4 是 第 一 款 被 广泛 使 用 的 高 分 辨 率 设备 。 它 的 屏幕 大 小 为 960 乘 以 
640 像素 ,分 辨 率 为 每 英寸 326 个 像素 ， 是 上 一 个 版 本 iPhone (iPhone 3GS ) 及 2011 年 
的 15" MacBook Pro 笔记 本 分 辩 率 的 两 倍 。 预 计 其 他 设备 ,从 平板 电脑 到 笔记 本 电脑 再 到 
台式 机 都 会 跟风 。 和 幸好， 我 们 的 响应 式 工具 已 经 提供 了 方法 ， 可 以 为 这 类 设备 提供 增强 
LFF 

假设 我 们 要 为 使 用 高 分 辩 率 设备 的 用 户 加 载 一 个 高 分 辩 率 版 本 的 网 站 标志 图 片 。 最 近 在 
重新 设计 个 人 网 站 http://www.benfrain.com 时 ,我 就 遇 到 了 这 种 情况 。 我 的 网 站 标志 区 域 


«div classz'logo'» 
«a hrefz'http:/[benfrain.com/'»«[ a» 


















































«Il di v» 

对 应 的 css 规则 如 下 : 

$container header[rolez'banner'] .10go a ( 
background-image: url("../img/l0go2.png'); 
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background-repeat: no-repeat; 
background-size: contain; 
display: block; 
height: 7em; 
margin-top: 10px; 

} 


最 初 显示 效果 如 下 : 





DESIGN WRITING BLOG CONTACT 


Latest Posts 


WordPress — how to strip 
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看 起 来 很 好 ， 但 我 想 让 标志 在 高 分 状 率 设备 上 也 尽 可 能 清晰 。 所 以 ， 我 制作 了 两 个 新 版 
本 的 图 片 (一 个 用 于 默认 状态 , 一 个 用 于 悬 停 状态 )， 图片 尺寸 是 原来 的 两 倍 ， 然 后 将 其 
分 别 命 名 为 10g02@x2, png fillogo20verQx2. png。 之 后 在 CSS 中 追加 如 下 代码 : 


@media all and (-webkit-min-device-pixel-ratio : 1.5) ( 











#container header[rolez'banner"'] .logo a { 
background-image: url("../i mg/logo2Qx2. png") 

} 

#contai ner header[role="banner"] .logo a:hover { 
background-image: url("../img/logo20ver Qx2. png") 

} 
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第 9 章 解决 跨 浏 览 器 问题 





上 面 的 媒体 查询 匹配 最 小 设备 像素 比 为 1.5 的 设备 。 因 此 , 像 iPhone4 以 及 后 续 出 现 的 高 
分 辨 率 设备 就 会 使 用 该 媒体 查询 内 的 样式 。 你 可 能 注意 到 样式 中 包含 了 - webkit- 前 级 。 
和 以 前 一 样 ， 记 得 针对 各 种 设备 添加 对 应 的 私有 前 级 。 

现在 ， 在 高 分 辩 率 设备 上 就 会 显示 对 应 的 高 分 辩 率 标志 ， 效 果 如 下 : 











Carrier 全 4:38 PM c 
Technology w writing and website 3c blog of... 
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无 法 和 否认， we a E 你 最 好 还 是 使 用 真 机 亲身 体验 一 下 那 种 微妙 的 差 
别 ， 图 片 的 细节 越 丰富 ， 在 高 分 辩 率 屏幕 上 显示 的 效果 也 就 越 清 晰 。 

使 用 这 个 技巧 时 需要 慎重 。 图 片 尺寸 越 大 ， 文 件 体积 也 越 大 ， 所 需 的 加 载 时 间 会 更 长 ， 
所 以 再 重申 一 遍 : 你 可 以 这 么 做 ， 但 不 一 定 应 该 这 么 做 。 

另外 ， 如 果 浏 览 器 支持 可 缩放 矢量 图 形 ( SVG )， 那 使 用 该 技术 替代 图 片 可 以 解决 我 们 目 
前 面临 的 很 多 图 片 缩放 问题 。 顾 名 思 义 ， 可 缩放 矢量 图 形 能 生成 可 任意 缩放 但 显示 清晰 
的 矢量 图 片 。 不 过 ， 媒体 查询 和 SVG 对 佬 入 在 页 面 中 的 高 分 辩 率 图 片 无 能 为 力 。 在 这 种 
情况 下 你 需要 考虑 基于 JavaScript 的 解决 方案 
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9.6 


小 结 


本 章 ， 我 们 分 析 了 渐进 增强 与 优雅 降级 的 本 质 区 别 。 随 后 使 用 垫 片 脚本 让 老 版 本 正 可 以 
识别 媒体 查询 ， 从 而 使 我 们 的 设计 在 这 些 老 弱 浏 览 器 中 也 能 响应 。 接 着 ,我 们 学 习 了 使 
用 Modernizr 根据 一 系列 功能 检测 按 需 加 载 CSS 和 JavaScript 文件 , 从 而 为 缺少 某 个 特性 
的 浏览 器 提供 垫 片 脚本 ， 以 及 额外 或 独立 的 样式 。 最 后 ， 我 们 还 简单 介绍 了 在 不 和 久 的 将 
来 会 极为 常用 的 CSS3 技巧 ， 为 相应 的 设备 提供 更 好 的 增强 体验 。 

此 时 此 刻 , 关于 制作 响应 式 网 站 或 Web 应 用 所 需 的 技术 和 工具 , 相信 我 都 已 经 讲 到 了 (但 
愿 如 此 )。 

我 坚信 ， 对 目前 的 大 多 数 网 站 来 说 , 采用 HTML5 和 CSS3 的 响应 式 网 站 设计 ,绝对 是 最 
佳 方案 。 只 要 对 现 有 的 工作 流程 、 实 际 做 法 和 开发 技巧 稍 作 调整 ， 就 可 以 制作 出 快速 、 
灵活 、 易 维护 的 网 站 ， 最 重要 的 是 ， 无 论 在 何 种 视 口 下 网 站 都 能 表现 完美 。 

随 着 移动 设备 的 日 益 普及 , 我 们 之 前 从 未 预见 到 的 新 设备 也 将 陆续 加 入 上 网 冲浪 的 队伍 。 
响应 式 设计 无 疑 为 我 们 提供 了 一 套 可 靠 且 面向 未 来 的 方法 ， 让 我 们 的 响应 式 网 站 无 论 在 
任何 设备 、 任 何 视 口 中 ， 也 无 论 是 否 在 线 ， 都 能 快速 响应 。 
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“看 完 这 本 书 ， 我 必须 得 说 ， 这 时 间 花 得 太 值 了 。 作 
者 通过 一 个 虚构 的 网 站 ， 让 我 们 掌握 所 有 细节 

“响应 式 Web 设 计 具 有 巨大 的 潜在 商业 价值 ， 这 本 书 
把 响应 式 Web 设 计 讲 得 非常 透彻 


一 一 亚马逊 读者 评论 


随 着 ijPad mini 的 发 布 ， 又 一 个 新 的 屏幕 尺寸 诞生 了 。 
用 不 着 全 面 统 计 ， 你 就 会 发 现 移动 互联 网 时 代 众 多 的 屏幕 
规格 ， 从 智能 手机 的 3、4、5 英 寸 ， 到 平板 电脑 的 7、8、 
9、10 英 寸 ， 再 到 笔记 本 和 台式 机 的 13 至 30 英 寸 ， 绝 非 目 
前 单一 的 固定 或 流 式 布局 所 能 应 付 。 于 是 ， 响 应 式 设计 应 
运 而 生 ， 而 且 它 也 将 成 为 移动 互联 网 时 代 前 端 设计 与 开发 
人 员 的 一 门 必修 课 。 

本 书 堪 称 学 习 响 应 式 Web 设 计 的 难得 佳作 。 它 不 仅 全 
面 、 细 致 、 图 文 并 茂 地 介绍 了 了 响应 式 设 计 相 关 的 技术 ， 比 
如 媒体 查询 、 流 式 布局 、 弹 性 媒体 和 弹性 字体 等 ， 还 把 近 
几 年 来 Web 设 计 领 域 公认 的 最 佳 设计 理念 有 机 地 融入 到 了 
实例 当中 ， 比 如 移动 先行 (Mobile First ) 、 渐 进 增强 、 平 
稳 退 化 、 无 障碍 设计 等 。 更 加 难得 的 是 ， 本 书 以 设计 跨 屏 
幕 的 网 页 ( 响应 式 设计 ) 为 出 发 点 ， 以 点 带 面 ， 把 如 今 
Web 设 计 领 域 两 大 标准 的 最 新 版 本 HTML5 和 CSS3 也 纳入 
其 中 , 读者 在 掌握 先进 设计 方法 的 同时 也 能 掌握 最 新 的 设 
计 技 术 ( 比如 使 用 新 的 HTML5 结 构 化 语义 标记 、 嵌 入 媒 
体 、 响 应 式 视频 ， 以 及 CSS3 的 新 选择 器 、 特 效 、 过 渡 、 变 
形 和 动画 等 ) ， 从 而 可 以 免除 重复 学 习 新 标准 之 苦 ， 让 自 
己 一 步 跨 入 Web 设 计 领 域 的 最 前 没 。 无 论 你 想 学 习 响 应 式 
Web 设 计 ， 还 是 学 习 HTML5 和 CSS3 的 实际 应 用 ， 本 书 都 
能 满足 你 的 需要 ， 是 毋庸 置疑 的 明智 之 选 。 

说 到 底 ， 响 应 式 Web 设 计 并 非 一 门 独立 的 技术 ， 而 只 
是 现 有 技术 的 一 个 组 合 应 用 。 只 要 有 一 点 HTML 和 CSS 基 
础 的 读者 都 能 顺利 地 掌握 它 。 对 于 中 、 高 级 的 前 端 设 计 和 
开发 人 员 ， 翻 阅 本 书 也 有 助 于 理 清 自己 的 知识 脉络 ， 对 这 
个 新 的 设计 理念 获得 更 全 面 、 深 入 的 理解 和 把 握 。 
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